<templates>
  <t t-name="o-spreadsheet-PivotMeasureDisplayPanel">
    <Section title.translate="Show measure as:">
      <Select
        class="'o-pivot-measure-display-type'"
        values="this.measureDisplayTypeOptions"
        selectedValue="this.store.measureDisplay.type"
        onChange="(value) => this.store.updateMeasureDisplayType(value)"
      />
      <div
        class="o-pivot-measure-display-description mt-3 ps-3 border-start"
        t-out="this.measureDisplayDescription[this.store.measureDisplay.type]"
      />
    </Section>

    <Section t-if="this.store.doesDisplayNeedsField" title.translate="Base field:">
      <div class="o-pivot-measure-display-field w-100 py-1 px-3 border">
        <t t-if="this.store.fields.length">
          <RadioSelection
            choices="this.fieldChoices"
            selectedValue="this.store.measureDisplay.fieldNameWithGranularity"
            name="'baseField'"
            onChange.bind="(val) => this.store.updateMeasureDisplayField(val)"
            direction="'vertical'"
          />
        </t>
        <t t-else="">
          <div class="text-muted text-center my-3">No active dimension in the pivot</div>
        </t>
      </div>
    </Section>

    <t t-set="values" t-value="this.store.values"/>
    <Section t-if="this.store.doesDisplayNeedsValue and values.length" title.translate="Base item:">
      <div class="o-pivot-measure-display-value w-100 py-1 px-3 border">
        <RadioSelection
          choices="values"
          selectedValue="this.store.measureDisplay.value"
          name="'baseValue'"
          onChange.bind="(val) => this.store.updateMeasureDisplayValue(val)"
          direction="'vertical'"
        />
      </div>
    </Section>

    <Section>
      <div class="o-sidePanelButtons">
        <button t-on-click="this.onCancel" class="o-pivot-measure-cancel o-button">Discard</button>
        <button t-on-click="this.onSave" class="o-pivot-measure-save o-button primary">Save</button>
      </div>
    </Section>
  </t>
</templates>
