<templates>
  <t t-name="o-spreadsheet-MoreFormatsPanel">
    <div class="o-more-formats-panel">
      <Section title.translate="Format type">
        <BadgeSelection
          choices="this.store.categories"
          onChange.bind="(category) => this.store.changeCategory(category)"
          selectedValue="this.store.category"
        />
      </Section>
      <t t-if="this.store.category === 'currency'" t-call="o-spreadsheet-CustomCurrencySection"/>
      <t t-set="proposals" t-value="this.store.formatProposals"/>
      <Section title.translate="Type" t-if="proposals.length">
        <div class="o-format-proposals overflow-auto border">
          <div
            t-foreach="proposals"
            t-as="proposal"
            t-key="proposal.format"
            t-att-data-name="proposal.format"
            t-on-click="() => this.store.updateFormat(proposal.format)"
            class="w-100 d-flex align-items-center format-preview px-2 py-1"
            t-att-class="{'active': (proposal.format || '') === (this.store.currentFormat || '')}">
            <span t-out="proposal.label"/>
          </div>
        </div>
      </Section>

      <Section title.translate="Format" class="'o-custom-format-section'">
        <TextInput
          value="this.store.currentFormat || ''"
          onChange="(format) => this.store.updateFormat(format)"
          placeholder.translate="Format code"
          alwaysShowBorder="true"
          errorMessage="this.store.invalidFormatMessage"
        />
        <t t-set="examples" t-value="this.store.formatExamples"/>
        <div class="o-format-examples mt-4 p-2 rounded border" t-if="examples.length">
          <table class="w-100">
            <t t-foreach="examples" t-as="example" t-key="example_index">
              <tr>
                <td class="w-25 pe-3 o-fw-bold" t-out="example.label"/>
                <td class="w-75 text-truncate" t-out="example.value"/>
              </tr>
            </t>
          </table>
        </div>
      </Section>
    </div>
  </t>

  <t t-name="o-spreadsheet-CustomCurrencySection">
    <t t-set="availableCurrencies" t-value="this.store.availableCurrencies"/>
    <Section t-if="availableCurrencies.length > 1" title.translate="Currency">
      <Select
        class="'o-available-currencies'"
        values="this.availableCurrenciesOptions"
        selectedValue="this.store.selectedCurrencyIndex.toString()"
        onChange.bind="this.updateSelectCurrency"
      />
    </Section>
    <Section>
      <div class="o-subsection-left">
        <div class="o-section-title">Code</div>
        <TextInput
          value="this.store.currencyCode"
          placeholder.translate="code"
          onChange="(code) => this.store.changeCurrencyCode(code)"
          alwaysShowBorder="true"
        />
      </div>
      <div class="o-subsection-right">
        <div class="o-section-title">Symbol</div>
        <TextInput
          value="this.store.currencySymbol"
          placeholder.translate="symbol"
          onChange="(symbol) => this.store.changeCurrencySymbol(symbol)"
          alwaysShowBorder="true"
        />
      </div>
      <Checkbox
        name="'accountingFormat'"
        className="'pt-2'"
        label.translate="Accounting format"
        value="this.store.isAccountingFormat"
        onChange="() => this.store.toggleAccountingFormat()"
      />
    </Section>
  </t>
</templates>
