<templates>
  <t t-name="o-spreadsheet-FilterMenu">
    <div class="o-filter-menu d-flex flex-column py-3" t-on-wheel.stop="">
      <div t-if="this.isSortable" class="o-filter-menu-content">
        <div
          class="o-filter-menu-item py-2 ps-4 mb-1"
          t-on-click="() => this.sortFilterZone('asc')">
          Sort ascending (A ⟶ Z)
        </div>
        <div class="o-filter-menu-item py-2 ps-4" t-on-click="() => this.sortFilterZone('desc')">
          Sort descending (Z ⟶ A)
        </div>
        <div class="o-separator border-bottom"/>
      </div>
      <div class="o-filter-menu-content">
        <SidePanelCollapsible
          isInitiallyCollapsed="this.filterValueType !== 'criterion'"
          title.translate="Filter by criterion">
          <t t-set-slot="content">
            <FilterMenuCriterion
              criterion="this.getFilterCriterionValue(this.props.filterPosition)"
              onCriterionChanged.bind="this.onCriterionChanged"
              criterionOperators="this.criterionOperators"
            />
            <div class="mb-3"/>
          </t>
        </SidePanelCollapsible>

        <SidePanelCollapsible
          isInitiallyCollapsed="this.filterValueType === 'criterion'"
          title.translate="Filter by values">
          <t t-set-slot="content">
            <FilterMenuValueList
              values="this.state.values"
              onUpdateHiddenValues.bind="this.onUpdateHiddenValues"
            />
          </t>
        </SidePanelCollapsible>

        <div class="o-filter-menu-buttons d-flex justify-content-end">
          <button class="o-button o-filter-menu-cancel me-2" t-on-click="this.cancel">
            Discard
          </button>
          <button class="o-button primary o-filter-menu-confirm" t-on-click="this.confirm">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </t>
</templates>
