<templates>
  <t t-name="o-spreadsheet-PivotMeasureEditor">
    <t t-set="measure" t-value="this.props.measure"/>
    <PivotDimension
      dimension="measure"
      onRemoved="this.props.onRemoved"
      onNameUpdated.bind="this.updateName">
      <t t-set-slot="upper-right-icons">
        <t t-if="measure.isHidden" t-set="hideTitle">Show</t>
        <t t-else="" t-set="hideTitle">Hide</t>
        <i
          t-att-data-icon="measure.isHidden ? 'visibility_off_f' : 'visibility_f'"
          t-att-title="hideTitle"
          class="o-button-icon pe-1 ps-1 oi"
          t-on-click="this.toggleMeasureVisibility"
        />
        <i
          class="o-button-icon pe-1 ps-1 oi oi-filled"
          data-icon="settings_f"
          title="Show values as"
          t-on-click="this.openShowValuesAs"
        />
      </t>
      <div t-if="measure.computedBy" class="d-flex flex-row small">
        <div class="d-flex flex-column py-2 px-2 w-100">
          <StandaloneComposer
            onConfirm.bind="this.updateMeasureFormula"
            composerContent="measure.computedBy.formula"
            defaultRangeSheetId="measure.computedBy.sheetId"
            contextualAutocomplete="this.getMeasureAutocomplete()"
            getContextualColoredSymbolToken.bind="this.getColoredSymbolToken"
            invalid="this.isCalculatedMeasureInvalid"
          />
        </div>
      </div>
      <div class="d-flex flex-row">
        <div class="d-flex py-1 px-2 w-100 small">
          <div class="pivot-dim-operator-label">Aggregated by</div>
          <Select
            class="'flex-grow-1'"
            values="this.aggregatorOptions"
            selectedValue="this.props.measure.aggregator"
            onChange.bind="this.updateAggregator"
          />
        </div>
      </div>
      <div class="d-flex flex-row">
        <div class="d-flex py-1 px-2 w-100 small text-muted o-measure-description">
          <i t-out="this.getMeasureDescription(measure)"/>
        </div>
      </div>
    </PivotDimension>
  </t>
</templates>
