<templates>
  <t t-name="o-spreadsheet-RemoveDuplicatesPanel">
    <div class="o-remove-duplicates">
      <Section>
        <ValidationMessages messages="[this.selectionStatisticalInformation]" msgType="'info'"/>
      </Section>
      <Section class="'pt-0'">
        <t t-set="dataHasHeaderLabel">Data has header row</t>
        <Checkbox
          name="'dataHasHeader'"
          value="this.dataCleanupSore.hasHeader"
          label="dataHasHeaderLabel"
          onChange.bind="this.toggleHasHeader"
        />
      </Section>

      <Section class="'pt-0'" title.translate="Columns to analyze">
        <div class="o-checkbox-selection overflow-auto">
          <t t-set="selectAllLabel">Select all</t>
          <Checkbox
            value="this.isEveryColumnSelected"
            label="selectAllLabel"
            onChange.bind="this.toggleAllColumns"
          />

          <t t-foreach="Object.keys(this.dataCleanupSore.columns)" t-as="colIndex" t-key="colIndex">
            <Checkbox
              value="this.dataCleanupSore.columns[colIndex]"
              label="this.getColLabel(colIndex)"
              onChange="() => this.toggleColumn(colIndex)"
            />
          </t>
        </div>
      </Section>

      <Section>
        <div class="o-sidePanelButtons">
          <button
            class="o-button primary"
            t-att-class="{'o-disabled': !this.canConfirm}"
            t-on-click="this.onRemoveDuplicates">
            Remove duplicates
          </button>
        </div>
      </Section>
      <Section t-if="this.errorMessages.length">
        <ValidationMessages messages="this.errorMessages" msgType="'error'"/>
      </Section>
    </div>
  </t>
</templates>
