<templates>
  <t t-name="o-spreadsheet-Select">
    <div
      tabIndex="0"
      t-ref="this.selectRef"
      class="o-input o-select"
      t-att-class="this.props.class"
      t-att-name="this.props.name"
      t-att-title="this.props.title"
      t-on-pointerdown="this.onMouseDown"
      t-on-keydown="this.onKeyDown"
      t-out="this.selectedLabel"
    />

    <Popover
      t-if="this.state.isPopoverOpen"
      t-props="this.popoverProps"
      t-key="this.state.isPopoverOpen">
      <div
        class="o-select-dropdown overflow-hidden py-2"
        t-att-class="this.props.popoverClass"
        t-ref="this.dropdownRef">
        <t t-foreach="this.props.values" t-as="value" t-key="value_index">
          <div
            class="o-select-option"
            t-att-class="{
              'o-active': value.value === this.activeValue
            }"
            t-att-data-id="value.value"
            t-out="value.label"
            t-att-title="value.label"
            t-on-click="() => this.onOptionClick(value.value)"
            t-on-mouseenter="() => this.onOptionHover(value.value)"
          />
          <div t-if="value.separator and !value_last" class="o-separator border-bottom"/>
        </t>
      </div>
    </Popover>
  </t>
</templates>
