{{input
  value=value
  placeholder=(if placeholder placeholder placeholderText)
  autocomplete=autocomplete
  focus-in=(action "showOptions")
  focus-out=(queue (action "selectHighlightedOption") (action "onFocusOut"))
  class=(i "uni-input uni-input--bordered ${errorClass}" errorClass=(if hasError "uni-input--error"))
  keyDown=(action "keyPress")}}

{{#if optionsFiltered}}
  {{#if showOptions}}
    <ul class="options">
      {{#each optionsFiltered as |option index|}}
        <li {{action "onSelected" option}}>
          <span class="option {{if (eq index highlighted) "option--highlighted"}}" {{action "setHighlighted" index on="mouseEnter"}}>
            {{#if option.option.code}}
              {{yield option}}
            {{else}}
              {{html-safe option.matchedOptionText}}
            {{/if}}
          </span>
        </li>
      {{/each}}
    </ul>
  {{/if}}
{{else}}
  {{component noResultsComponent translatedText=noResultsText value=value}}
{{/if}}