<templates>
  <t t-name="o-spreadsheet-SettingsPanel">
    <div class="o-settings-panel">
      <Section title.translate="Locale">
        <Select
          selectedValue="this.currentLocale.code"
          values="this.selectOptions"
          onChange="(value) => this.onLocaleChange(value)"
        />
        <div class="o-locale-preview mt-4 p-3 rounded border">
          <div>
            <span class="o-fw-bold me-1">Number:</span>
            <span t-out="this.numberFormatPreview"/>
          </div>
          <div>
            <span class="o-fw-bold me-1">Date:</span>
            <span t-out="this.dateFormatPreview"/>
          </div>
          <div>
            <span class="o-fw-bold me-1">Date time:</span>
            <span t-out="this.dateTimeFormatPreview"/>
          </div>
          <div>
            <span class="o-fw-bold me-1">First day of week:</span>
            <span t-out="this.firstDayOfWeek"/>
          </div>
        </div>
      </Section>

      <Section class="'pt-0'">
        <t t-set="message">Those settings affect all users.</t>
        <ValidationMessages messages="[message]" msgType="'info'"/>
      </Section>
    </div>
  </t>
</templates>
