<templates>
  <t t-name="o-spreadsheet-TextValueProvider">
    <div
      t-ref="this.autoCompleteListRef"
      t-on-pointerdown.prevent=""
      t-att-class="{
          'o-autocomplete-dropdown': this.props.proposals.length}">
      <t t-foreach="this.props.proposals" t-as="proposal" t-key="proposal.text + proposal_index">
        <div
          class="o-autocomplete-content d-flex flex-column text-start"
          t-att-class="{'o-autocomplete-value-focus': this.props.selectedIndex === proposal_index}"
          t-on-click="() => this.props.onValueSelected(proposal)"
          t-on-pointermove="() => this.props.onValueHovered(proposal_index)">
          <div class="d-flex align-items-center gap-2">
            <div t-if="proposal.icon">
              <t t-call="{{proposal.icon}}"/>
            </div>
            <div class="o-autocomplete-value text-truncate flex-grow-1">
              <t t-set="htmlContent" t-value="proposal.htmlContent || [{ value: proposal.text}]"/>
              <span
                t-foreach="htmlContent"
                t-as="content"
                t-key="content_index"
                t-att-class="content.classes?.join(' ')"
                t-att-style="this.getCss(content)"
                t-out="content.value"
              />
            </div>
          </div>
          <div
            class="o-autocomplete-description text-truncate"
            t-out="proposal.description"
            t-if="this.props.selectedIndex === proposal_index || proposal.alwaysExpanded"
          />
        </div>
      </t>
    </div>
  </t>
</templates>
