{{! TODO: META-8742 Add this as a component in the Nacho Component library as part of NachoHoverDropdown }}
{{#basic-dropdown renderInPlace=@renderInPlace as |bd|}}
  {{#if (not-eq @wrappedTriggerComponent true)}}
    <bd.trigger
      @class="nacho-drop-down__trigger {{@triggerClass}}"
      {{on "mousedown" this.prevent}}
      {{on "mouseenter" (fn this.showDropDown bd)}}
      {{on "mouseleave" (fn this.hideDropDown bd)}}
    >
      <strong class="nacho-drop-down__active">
        {{this.selectedDropDown.label}}
      </strong>

      {{#if this.selectedDropDown}}
        <span class="nacho-drop-down__active__toggle">
          <FaIcon @icon={{if this.isExpanded "caret-up" "caret-down"}} />
        </span>
      {{/if}}
    </bd.trigger>
  {{/if}}

  {{yield
    (hash
      trigger=(component bd.trigger
        onMouseDown=(fn this.prevent)
        onMouseEnter=(fn this.showDropDown)
        onMouseLeave=(fn this.hideDropDown)
      )
      isExpanded=this.isExpanded
      content=(component "nacho-hover-dropdown/dropdown-content"
        baseComponent=bd.content
        onMouseEnter=(fn this.showDropDown bd)
        onMouseLeave=(fn this.hideDropDown bd)
        onSelect=(fn this.onDropDownSelect bd)
        selectedOption=this.selectedDropDown
        options=this.dropDownItems
      )
    )
  }}
{{/basic-dropdown}}