<templates>
  <t t-name="o-spreadsheet-Top10CriterionForm">
    <div class="o-top-10-criterion d-flex flex-row align-items-center gap-2 w-100 mt-2">
      <Select
        class="'o-top-10-select-values flex-shrink-0'"
        values="this.isBottomSelectOptions"
        selectedValue="this.props.criterion.isBottom ? 'bottom' : 'top'"
        onChange.bind="this.updateIsBottom"
      />
      <CriterionInput
        value="this.props.criterion.values[0]"
        onValueChanged.bind="this.onValueChanged"
        criterionType="this.props.criterion.type"
        disableFormulas="true"
        focused="this.props.autofocus"
      />
      <Select
        class="'o-top-10-select-mode flex-shrink-0'"
        values="this.isPercentSelectOptions"
        selectedValue="this.props.criterion.isPercent ? 'percent' : 'values'"
        onChange.bind="this.updateIsPercent"
      />
    </div>
  </t>
</templates>
