<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->
<div data-overflow-menu class="{{@root.prefix}}--overflow-menu">
  <button
    class="{{@root.prefix}}--overflow-menu__trigger {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-start"
    aria-haspopup="true" aria-expanded="false" id="{{idSuffix.default}}-trigger" aria-controls="{{idSuffix.default}}">
    <span class="{{@root.prefix}}--assistive-text">Overflow</span>
    {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
  </button>
  <div class="{{@root.prefix}}--overflow-menu-options" tabindex="-1" role="menu"
    aria-labelledby="{{idSuffix.default}}-trigger" data-floating-menu-direction="{{direction}}"
    id="{{idSuffix.default}}">
    <ul  class="{{@root.prefix}}--overflow-menu-options__content">
      {{#each items}}
      <li
        class="{{@root.prefix}}--overflow-menu-options__option {{#if disabled}} {{@root.prefix}}--overflow-menu-options__option--disabled {{/if}} {{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger {{/if}}">
        <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if title}} title="{{title}}"
          {{/if}} {{#if primaryFocus}} data-floating-menu-primary-focus {{/if}} {{#if disabled}} disabled {{/if}}>
          <span class="{{@root.prefix}}--overflow-menu-options__option-content">
            {{label}}
          </span>
        </button>
      </li>
      {{/each}}
    </ul>
    <!-- Note: focusable span allows for focus wrap feature within Overflow Menus -->
    <span tabindex="0"></span>
  </div>
</div>

<div data-overflow-menu class="{{@root.prefix}}--overflow-menu">
  <button
    class="{{@root.prefix}}--overflow-menu__trigger {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-start"
    aria-haspopup="true" aria-expanded="false" id="{{idSuffix.flip}}-trigger" aria-controls="{{idSuffix.flip}}">
    <span class="{{@root.prefix}}--assistive-text">Overflow</span>
    {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
  </button>
  <div class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1"
    data-floating-menu-direction="{{direction}}" role="menu" aria-labelledby="{{idSuffix.flip}}-trigger"
    id="{{idSuffix.flip}}">
    <ul  class="{{@root.prefix}}--overflow-menu-options__content">
      {{#each items}}
      <li
        class="{{@root.prefix}}--overflow-menu-options__option {{#if disabled}} {{@root.prefix}}--overflow-menu-options__option--disabled {{/if}} {{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger {{/if}}">
        <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if title}} title="{{title}}"
          {{/if}} {{#if primaryFocus}} data-floating-menu-primary-focus {{/if}} {{#if disabled}} disabled {{/if}}>
          <span class="{{@root.prefix}}--overflow-menu-options__option-content">
            {{label}}
          </span>
        </button>
      </li>
      {{/each}}
    </ul>
    <span tabindex="0"></span>
  </div>
</div>

<div data-overflow-menu class="{{@root.prefix}}--overflow-menu">
  <button
    class="{{@root.prefix}}--overflow-menu__trigger {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-start"
    aria-haspopup="true" aria-expanded="false" id="{{idSuffix.link}}-trigger" aria-controls="{{idSuffix.link}}">
    <span class="{{@root.prefix}}--assistive-text">Overflow</span>
    {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
  </button>
  <div class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1"
    data-floating-menu-direction="{{direction}}" role="menu" aria-labelledby="{{idSuffix.link}}-trigger"
    id="{{idSuffix.link}}">
    <ul  class="{{@root.prefix}}--overflow-menu-options__content">
      {{#each items}}
      <li
        class="{{@root.prefix}}--overflow-menu-options__option{{#if disabled}} {{@root.prefix}}--overflow-menu-options__option--disabled{{/if}}{{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger{{/if}}">
        <a href="https://www.ibm.com" class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if title}}
          title="{{title}}" {{/if}} {{#if primaryFocus}} data-floating-menu-primary-focus{{/if}}{{#if disabled}}
          tabindex="-1" aria-disabled="true" {{/if}}>
          <span class="{{@root.prefix}}--overflow-menu-options__option-content">
            {{label}}
          </span>
        </a>
      </li>
      {{/each}}
    </ul>
    <span tabindex="0"></span>
  </div>
</div>
