<templates>
  <t t-name="o-spreadsheet-SplitIntoColumnsPanel">
    <div class="o-split-to-cols-panel">
      <Section title.translate="Separator">
        <Select
          class="'mb-3'"
          values="this.separators"
          selectedValue="this.store.separatorValue"
          onChange.bind="this.onSeparatorChange"
        />

        <input
          class="o-input mb-3"
          type="text"
          t-if="this.store.separatorValue === 'custom'"
          t-att-value="this.store.customSeparator"
          t-on-input="this.updateCustomSeparator"
          placeholder="Add any characters or symbol"
        />

        <t t-set="addColumnsLabel">Add new columns to avoid overwriting cells</t>
        <Checkbox
          value="this.store.addNewColumns"
          label="addColumnsLabel"
          onChange.bind="this.updateAddNewColumnsCheckbox"
        />
      </Section>
      <Section>
        <div class="o-sidePanelButtons">
          <button
            class="o-button primary"
            t-att-class="{'o-disabled': this.isConfirmDisabled}"
            t-on-click="this.confirm">
            Confirm
          </button>
        </div>
      </Section>
      <Section t-if="this.errorMessages.length || this.warningMessages.length" class="'pb-0 pt-2'">
        <ValidationMessages messages="this.errorMessages" msgType="'error'"/>
        <ValidationMessages messages="this.warningMessages" msgType="'warning'"/>
      </Section>
    </div>
  </t>
</templates>
