<templates>
  <t t-name="o-spreadsheet-TablePanel">
    <div class="o-table-panel">
      <Section title.translate="Style options">
        <div class="d-flex flex-row">
          <div class="w-50">
            <div class="d-flex align-items-center">
              <Checkbox
                label="this.getCheckboxLabel('headerRow')"
                name="'headerRow'"
                value="this.tableConfig.numberOfHeaders > 0"
                onChange.bind="this.updateHasHeaders"
              />
              <NumberInput
                t-if="this.tableConfig.numberOfHeaders > 0"
                value="this.tableConfig.numberOfHeaders"
                class="'o-table-n-of-headers ms-2'"
                min="0"
                onChange.bind="this.onChangeNumberOfHeaders"
              />
            </div>
            <Checkbox
              label="this.getCheckboxLabel('totalRow')"
              name="'totalRow'"
              value="this.tableConfig.totalRow"
              onChange="(val) => this.updateTableConfig('totalRow', val)"
            />
            <Checkbox
              label="this.getCheckboxLabel('bandedRows')"
              name="'bandedRows'"
              value="this.tableConfig.bandedRows"
              onChange="(val) => this.updateTableConfig('bandedRows', val)"
            />
            <Checkbox
              label="this.getCheckboxLabel('hasFilters')"
              name="'hasFilters'"
              value="this.tableConfig.hasFilters"
              title="this.hasFilterCheckboxTooltip"
              disabled="!this.canHaveFilters"
              onChange.bind="this.updateHasFilters"
            />
          </div>
          <div>
            <Checkbox
              label="this.getCheckboxLabel('firstColumn')"
              name="'firstColumn'"
              value="this.tableConfig.firstColumn"
              onChange="(val) => this.updateTableConfig('firstColumn', val)"
            />
            <Checkbox
              label="this.getCheckboxLabel('lastColumn')"
              name="'lastColumn'"
              value="this.tableConfig.lastColumn"
              onChange="(val) => this.updateTableConfig('lastColumn', val)"
            />
            <Checkbox
              label="this.getCheckboxLabel('bandedColumns')"
              name="'bandedColumns'"
              value="this.tableConfig.bandedColumns"
              onChange="(val) => this.updateTableConfig('bandedColumns', val)"
            />
          </div>
        </div>
      </Section>
      <Section>
        <TableStylePicker
          tableConfig="this.props.table.config"
          onStylePicked.bind="this.onStylePicked"
          tableStyles="this.env.model.getters.getTableStyles()"
          type="'table'"
        />
      </Section>
      <Section title.translate="Data range">
        <SelectionInput
          t-key="this.props.table.type"
          ranges="[this.state.tableXc]"
          hasSingleRange="true"
          isInvalid="this.state.tableZoneErrors.length !== 0"
          onSelectionChanged="(ranges) => this.onRangeChanged(ranges)"
          onSelectionConfirmed.bind="this.onRangeConfirmed"
        />
      </Section>
      <Section class="'pt-0'">
        <Checkbox
          label="this.getCheckboxLabel('automaticAutofill')"
          name="'automaticAutofill'"
          value="this.tableConfig.automaticAutofill and this.props.table.type !== 'dynamic'"
          onChange="(val) => this.updateTableConfig('automaticAutofill', val)"
          className="'mb-1'"
          disabled="this.props.table.type === 'dynamic'"
        />
        <div class="d-flex flex-row align-items-center">
          <Checkbox
            label="this.getCheckboxLabel('isDynamic')"
            name="'isDynamic'"
            value="this.props.table.type === 'dynamic'"
            onChange.bind="this.updateTableIsDynamic"
            disabled="!this.canBeDynamic"
          />
          <div
            class="o-info-icon d-flex flex-row align-items-center text-muted ms-1"
            t-att-title="this.dynamicTableTooltip">
            <t t-call="o-spreadsheet-Icon.CIRCLE_INFO"/>
          </div>
        </div>
      </Section>
      <Section>
        <div class="o-sidePanelButtons">
          <button t-on-click="this.deleteTable" class="o-table-delete o-button o-button-danger">
            Delete table
          </button>
        </div>
      </Section>
      <Section t-if="this.errorMessages.length">
        <ValidationMessages messages="this.errorMessages" msgType="'error'"/>
      </Section>
    </div>
  </t>
</templates>
