<templates>
  <t t-name="o-spreadsheet-TableStyleEditorPanel">
    <div class="o-table-style-editor-panel">
      <Section title.translate="Style name">
        <TextInput
          value="this.state.styleName"
          onChange="(value) => this.state.styleName = value"
          alwaysShowBorder="true"
        />
      </Section>
      <Section class="'pt-1'" title.translate="Style color">
        <RoundColorPicker
          currentColor="this.state.primaryColor"
          onColorPicked.bind="this.onColorPicked"
          disableNoColor="true"
        />
      </Section>
      <Section class="'pt-1'" title.translate="Style template">
        <div class="d-flex flex-wrap">
          <t t-foreach="this.tableTemplates" t-as="templateName" t-key="templateName">
            <TableStylePreview
              selected="templateName === this.state.selectedTemplateName"
              tableConfig="this.previewTableConfig"
              tableStyle="this.computeTableStyle(templateName)"
              onClick="() => this.onTemplatePicked(templateName)"
              type="'table'"
            />
          </t>
        </div>
      </Section>
      <Section>
        <div class="o-sidePanelButtons">
          <button
            t-if="this.props.styleId"
            t-on-click="this.onDelete"
            class="o-delete o-button-danger o-button">
            Delete
          </button>
          <button t-on-click="this.onCancel" class="o-cancel o-button">Discard</button>
          <button t-on-click="this.onConfirm" class="o-confirm o-button primary">Confirm</button>
        </div>
      </Section>
    </div>
  </t>
</templates>
