<templates>
  <t t-name="o-spreadsheet-PivotCustomGroupsCollapsible">
    <SidePanelCollapsible
      class="'o-pivot-custom-groups'"
      isInitiallyCollapsed="true"
      title.translate="Groups">
      <t t-set-slot="content">
        <div class="ps-4">
          <div
            t-foreach="this.groups"
            t-as="group"
            t-key="group_index"
            class="o-pivot-custom-group pb-1">
            <div class="d-flex align-items-center justify-content-between small">
              <TextInput
                value="group.name"
                onChange="(newName) => this.onRenameGroup(group_index, newName)"
                selectContentOnFocus="true"
              />
              <i
                class="o-button-icon ps-3 oi oi-filled"
                data-icon="delete_f"
                t-on-click="() => this.onDeleteGroup(group_index)"
              />
            </div>
          </div>
          <div
            t-if="!this.hasOthersGroup"
            class="o-button-link o-add-others-group small pb-1"
            t-on-click="() => this.addOthersGroup()">
            <span>+ &quot;Others&quot; group</span>
          </div>
        </div>
      </t>
    </SidePanelCollapsible>
  </t>
</templates>
