<!--
  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 tabindex="0" aria-label="Overflow" class="{{@root.prefix}}--overflow-menu" role="button"
  aria-haspopup="true" aria-expanded="false">
  {{#if @root.featureFlags.componentsX}}
  {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
  {{else}}
  <svg aria-hidden="true" class="{{@root.prefix}}--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
    <g fill-rule="evenodd">
      <circle cx="1.5" cy="1.5" r="1.5" />
      <circle cx="1.5" cy="7.5" r="1.5" />
      <circle cx="1.5" cy="13.5" r="1.5" />
    </g>
  </svg>
  {{/if}}
  <ul class="{{@root.prefix}}--overflow-menu-options" tabindex="-1" role="menu" aria-label="Overflow"
    data-floating-menu-direction="{{direction}}">
    {{#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}}"
      role="presentation" {{#if disabled}} aria-disabled="true" {{/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}} tabindex="-1" {{/if}}>
        {{#if @root.featureFlags.componentsX}}
        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
          {{/if}}
          {{label}}
          {{#if @root.featureFlags.componentsX}}
        </div>
        {{/if}}
      </button>
    </li>
    {{/each}}
    {{#if @root.featureFlags.componentsX}}
    <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}}"
      role="presentation" {{#if disabled}} aria-disabled="true" {{/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}} tabindex="-1" {{/if}}>
        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
          Add
        </div>
        {{carbon-icon 'Add16'}}
      </button>
    </li>
    {{/if}}
  </ul>
</div>

<div data-overflow-menu tabindex="0" aria-label="Overflow" class="{{@root.prefix}}--overflow-menu" role="button"
  aria-haspopup="true" aria-expanded="false">
  {{#if @root.featureFlags.componentsX}}
  {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
  {{else}}
  <svg aria-hidden="true" class="{{@root.prefix}}--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
    <g fill-rule="evenodd">
      <circle cx="1.5" cy="1.5" r="1.5" />
      <circle cx="1.5" cy="7.5" r="1.5" />
      <circle cx="1.5" cy="13.5" r="1.5" />
    </g>
  </svg>
  {{/if}}
  <ul class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1"
    data-floating-menu-direction="{{direction}}" role="menu" aria-label="Overflow">
    {{#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}}"
      role="presentation" {{#if disabled}} aria-disabled="true" {{/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}} tabindex="-1" {{/if}}>
        {{#if @root.featureFlags.componentsX}}
        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
          {{/if}}
          {{label}}
          {{#if @root.featureFlags.componentsX}}
        </div>
        {{/if}}
      </button>
    </li>
    {{/each}}
    {{#if @root.featureFlags.componentsX}}
    <li class="{{@root.prefix}}--overflow-menu-options__option" role="presentation">
      <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem">
        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
          Add
        </div>
        {{carbon-icon 'Add16'}}
      </button>
    </li>
    <li
      class="{{@root.prefix}}--overflow-menu-options__option {{@root.prefix}}--overflow-menu-options__option--disabled"
      role="presentation" aria-disabled="true" }>
      <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" tabindex="-1">
        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
          Add
        </div>
        {{carbon-icon 'Add16'}}
      </button>
    </li>
    {{/if}}
  </ul>
</div>

<div data-overflow-menu tabindex="0" aria-label="Overflow" class="{{@root.prefix}}--overflow-menu" role="button"
  aria-haspopup="true" aria-expanded="false">
  {{#if @root.featureFlags.componentsX}}
  {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
  {{else}}
  <svg aria-hidden="true" class="{{@root.prefix}}--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
    <g fill-rule="evenodd">
      <circle cx="1.5" cy="1.5" r="1.5" />
      <circle cx="1.5" cy="7.5" r="1.5" />
      <circle cx="1.5" cy="13.5" r="1.5" />
    </g>
  </svg>
  {{/if}}
  <ul class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1"
    data-floating-menu-direction="{{direction}}" role="menu" aria-label="Overflow">
    {{#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}}"
      role="presentation">
      <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" {{/if}}>
        {{#if @root.featureFlags.componentsX}}
        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
          {{/if}}
          {{label}}
          {{#if @root.featureFlags.componentsX}}
        </div>
        {{/if}}
      </a>
    </li>
    {{/each}}
    {{#if @root.featureFlags.componentsX}}
    <li class="{{@root.prefix}}--overflow-menu-options__option" role="presentation">
      <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem">
        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
          Add
        </div>
        {{carbon-icon 'Add16'}}
      </button>
    </li>
    <li
      class="{{@root.prefix}}--overflow-menu-options__option {{@root.prefix}}--overflow-menu-options__option--disabled"
      role="presentation" aria-disabled="true" }>
      <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" tabindex="-1">
        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
          Add
        </div>
        {{carbon-icon 'Add16'}}
      </button>
    </li>
    {{/if}}
  </ul>
</div>
