{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
~}}

<BasicDropdown
  @horizontalPosition="left"
  @onOpen={{action
    (queue (action (mut this.isOpen) true) (action this.capture))
  }}
  @onClose={{action (mut this.isOpen) false}}
  as |dd|
>
  <dd.Trigger
    data-test-dropdown-trigger
    class="dropdown-trigger"
    {{on "keyup" (action "openOnArrowDown" dd)}}
  >
    <div class="dropdown-trigger-label" id="{{this.elementId}}-label">
      {{this.label}}
      {{#if this.selection.length}}
        <span data-test-dropdown-count class="tag is-light">
          {{this.selection.length}}
        </span>
      {{/if}}
    </div>
    <span class="dropdown-trigger-icon ember-power-select-status-icon"></span>
  </dd.Trigger>
  <dd.Content class="dropdown-options">
    {{#if this.options}}
      <ul
        role="listbox"
        aria-labelledby="{{this.elementId}}-label"
        data-test-dropdown-options
      >
        {{#each this.options key="key" as |option|}}
          <div
            data-test-dropdown-option={{option.key}}
            class="dropdown-option"
            tabindex="0"
            onkeyup={{action "traverseList" option}}
          >
            <label>
              <input
                type="checkbox"
                tabindex="-1"
                checked={{includes option.key this.selection}}
                role="option"
                onchange={{action "toggle" option}}
              />
              {{option.label}}
            </label>
          </div>
        {{/each}}
      </ul>
    {{else}}
      <ul aria-labelledby="{{this.elementId}}-label" data-test-dropdown-options>
        <li data-test-dropdown-empty class="dropdown-empty">
          No options
        </li>
      </ul>
    {{/if}}
  </dd.Content>
</BasicDropdown>