<templates>
  <t t-name="o-spreadsheet-PivotDesignPanel">
    <t t-set="isReadonly" t-value="this.env.model.getters.isReadonly()"/>
    <div class="h-100 overflow-y-auto">
      <div
        t-att="isReadonly ? ['inert', 1] : []"
        t-att-class="{ 'pe-none opacity-50': isReadonly }">
        <Section class="'o-pivot-design'" title.translate="Display options">
          <div>
            <div class="container-fluid p-0 pt-2">
              <div class="row mb-2 align-items-center">
                <div class="col-6">Max rows:</div>
                <div class="col-6 d-flex align-items-center">
                  <NumberInput
                    value="this.pivotStyle.numberOfRows ?? ''"
                    class="'o-pivot-n-of-rows'"
                    placeholder.translate="e.g. 10"
                    onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfRows')"
                  />
                </div>
              </div>
              <div class="row mb-2 align-items-center">
                <div class="col-6">Max columns:</div>
                <div class="col-6 d-flex align-items-center">
                  <NumberInput
                    value="this.pivotStyle.numberOfColumns ?? ''"
                    class="'o-pivot-n-of-columns'"
                    placeholder.translate="e.g. 5"
                    onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfColumns')"
                  />
                </div>
              </div>
              <div class="row mb-2 align-items-center">
                <div class="col-6">Show totals:</div>
                <div class="col-6 d-flex align-items-center">
                  <Checkbox
                    name="'displayTotals'"
                    value="this.pivotStyle.displayTotals ?? this.defaultStyle.displayTotals"
                    onChange="(val) => this.updatePivotStyleProperty('displayTotals', val)"
                  />
                </div>
              </div>
              <div class="row mb-2 align-items-center">
                <div class="col-6">Show column titles:</div>
                <div class="col-6 d-flex align-items-center">
                  <Checkbox
                    name="'displayColumnHeaders'"
                    value="this.pivotStyle.displayColumnHeaders ?? this.defaultStyle.displayColumnHeaders"
                    onChange="(val) => this.updatePivotStyleProperty('displayColumnHeaders', val)"
                  />
                </div>
              </div>
              <div class="row mb-2 align-items-center">
                <div class="col-6">Show measure titles:</div>
                <div class="col-6 d-flex align-items-center">
                  <Checkbox
                    name="'displayMeasuresRow'"
                    value="this.pivotStyle.displayMeasuresRow ?? this.defaultStyle.displayMeasuresRow"
                    onChange="(val) => this.updatePivotStyleProperty('displayMeasuresRow', val)"
                  />
                </div>
              </div>
              <div class="row mb-2 align-items-center">
                <div class="col-6">Use tabular form:</div>
                <div class="col-6 d-flex align-items-center">
                  <Checkbox
                    name="'tabularForm'"
                    value="this.pivotStyle.tabularForm ?? this.defaultStyle.tabularForm"
                    onChange="(val) => this.updatePivotStyleProperty('tabularForm', val)"
                  />
                </div>
              </div>
            </div>
          </div>
        </Section>

        <Section class="'o-pivot-table-style'" title.translate="Pivot table style">
          <div class="row mb-2 align-items-center pt-2">
            <div class="col-6">Banded rows:</div>
            <div class="col-6 d-flex align-items-center">
              <Checkbox
                name="'bandedRows'"
                value="this.pivotStyle.bandedRows ?? this.defaultStyle.bandedRows"
                onChange="(val) => this.updatePivotStyleProperty('bandedRows', val)"
              />
            </div>
          </div>
          <div class="row mb-2 align-items-center">
            <div class="col-6">Banded columns</div>
            <div class="col-6 d-flex align-items-center">
              <Checkbox
                name="'bandedColumns'"
                value="this.pivotStyle.bandedColumns ?? this.defaultStyle.bandedColumns"
                onChange="(val) => this.updatePivotStyleProperty('bandedColumns', val)"
              />
            </div>
          </div>
          <div class="row mb-2 align-items-center">
            <div class="col-6">Filter button</div>
            <div class="col-6 d-flex align-items-center">
              <Checkbox
                name="'hasFilters'"
                value="this.pivotStyle.hasFilters ?? this.defaultStyle.hasFilters"
                onChange="(val) => this.updatePivotStyleProperty('hasFilters', val)"
              />
            </div>
          </div>
          <div class="mt-4">
            <TableStylePicker
              tableConfig="this.tableConfig"
              onStylePicked.bind="this.onStylePicked"
              tableStyles="this.tableStyles"
              type="'pivot'"
            />
          </div>
        </Section>
      </div>
    </div>
  </t>
</templates>
