<!--
  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 class="{{@root.prefix}}--form-item">
  <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
    <span id="{{default.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
    <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
      class="{{@root.prefix}}--dropdown {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}">
      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
        aria-controls="{{default.idSuffix}}-menu"
        aria-labelledby="{{default.idSuffix}}-label {{default.idSuffix}}-value" type="button">
        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{default.idSuffix}}-value">{{#unless inline}} Dropdown
          option {{else}}Inline Dropdown label{{/unless}}</span>
        <span class="{{@root.prefix}}--dropdown__arrow-container">
          {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
        </span>
      </button>
      <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="-1"
        id="{{default.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{default.idSuffix}}-label">
        {{#each items as |item index|}}
        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
            aria-checked="{{#if index}}false{{else}}true{{/if}}"
            id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
        </li>
        {{/each}}
      </ul>
    </div>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
    {{/unless}}
  </div>
</div>

{{#unless inline}}
<div class="{{@root.prefix}}--form-item">
  <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
    <span id="{{helper.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
    <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
      class="{{@root.prefix}}--dropdown {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}">
      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
        aria-controls="{{helper.idSuffix}}-menu" aria-labelledby="{{helper.idSuffix}}-label {{helper.idSuffix}}-value"
        type="button">
        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{helper.idSuffix}}-value">{{#unless inline}} Dropdown
          option {{else}}Inline Dropdown label{{/unless}}</span>
        <span class="{{@root.prefix}}--dropdown__arrow-container">
          {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
        </span>
      </button>
      <ul class="{{@root.prefix}}--dropdown-list" role="menu" tabindex="-1" id="{{helper.idSuffix}}-menu"
        aria-hidden="true" aria-labelledby="{{helper.idSuffix}}-label">
        {{#each items as |item index|}}
        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
            aria-checked="{{#if index}}false{{else}}true{{/if}}"
            id="{{../helper.idSuffix}}-item{{@index}}">{{label}}</a>
        </li>
        {{/each}}
      </ul>
    </div>
    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
  </div>
</div>
{{/unless}}

<div class="{{@root.prefix}}--form-item">
  <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
    <span id="{{disabled.idSuffix}}-label" class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled"
      aria-disabled="true">Dropdown label</span>
    <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
      class="{{@root.prefix}}--dropdown{{#if up}} {{@root.prefix}}--dropdown--up{{/if}}{{#if light}} {{@root.prefix}}--dropdown--light{{/if}}{{#if inline}} {{@root.prefix}}--dropdown--inline{{/if}} {{@root.prefix}}--dropdown--disabled">
      <button disabled class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
        aria-controls="{{disabled.idSuffix}}-menu"
        aria-labelledby="{{disabled.idSuffix}}-label {{disabled.idSuffix}}-value" type="button">
        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{disabled.idSuffix}}-value">{{#unless inline}}
          Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
        <span class="{{@root.prefix}}--dropdown__arrow-container">
          {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
        </span>
      </button>
      <!-- Note: remove `tabindex` from disabled dropdown lists -->
      <ul class="{{@root.prefix}}--dropdown-list" id="{{disabled.idSuffix}}-menu" role="menu"
        id="{{disabled.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{disabled.idSuffix}}-label">
        {{#each items as |item index|}}
        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
            aria-checked="{{#if index}}false{{else}}true{{/if}}"
            id="{{../disabled.idSuffix}}-item{{@index}}">{{label}}</a>
        </li>
        {{/each}}
      </ul>
    </div>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled" aria-disabled="true">
      Optional helper text
      here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    {{/unless}}
  </div>
</div>

<div class="{{@root.prefix}}--form-item">
  <div
    class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline {{@root.prefix}}--dropdown__wrapper--inline--invalid{{/if}}">
    <span id="{{invalid.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
    <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
      class="{{@root.prefix}}--dropdown {{@root.prefix}}--dropdown--invalid {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}}{{#if inline}} {{@root.prefix}}--dropdown--inline{{/if}}"
      data-invalid>
      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
        aria-controls="{{invalid.idSuffix}}-menu"
        aria-labelledby="{{invalid.idSuffix}}-label {{invalid.idSuffix}}-value" type="button">
        {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--dropdown__invalid-icon')}}
        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{invalid.idSuffix}}-value">{{#unless inline}} Dropdown
          option {{else}}Inline Dropdown label{{/unless}}</span>
        <span class="{{@root.prefix}}--dropdown__arrow-container">
          {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
        </span>
      </button>
      <ul class="{{@root.prefix}}--dropdown-list" id="{{invalid.idSuffix}}-menu" role="menu" tabindex="-1"
        id="{{invalid.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{invalid.idSuffix}}-label">
        {{#each items as |item index|}}
        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
            aria-checked="{{#if index}}false{{else}}true{{/if}}"
            id="{{../invalid.idSuffix}}-item{{@index}}">{{label}}</a>
        </li>
        {{/each}}
      </ul>
      {{#if inline}}
      <div class="{{@root.prefix}}--form-requirement">
        This is not a validation message
      </div>
      {{/if}}
    </div>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form-requirement">
      This is a validation message
    </div>
    {{/unless}}
  </div>
</div>

<div class="{{@root.prefix}}--form-item">
  <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
    <span id="{{default.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
    <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
      class="{{@root.prefix}}--dropdown  {{@root.prefix}}--dropdown--show-selected {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}">
      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false"
        aria-controls="{{default.idSuffix}}-menu"
        aria-labelledby="{{default.idSuffix}}-label {{default.idSuffix}}-value" type="button">
        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{default.idSuffix}}-value">{{#unless inline}} Dropdown
          option {{else}}Inline Dropdown label{{/unless}}</span>
        <span class="{{@root.prefix}}--dropdown__arrow-container">
          {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
        </span>
      </button>
      <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="-1"
        id="{{default.idSuffix}}-menu" aria-hidden="true" aria-labelledby="{{default.idSuffix}}-label">
        {{#each items as |item index|}}
        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio"
            aria-checked="{{#if index}}false{{else}}true{{/if}}"
            id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
          {{ carbon-icon 'Checkmark16' class=(add @root.prefix '--list-box__menu-item__selected-icon') aria-hidden="true" }}
        </li>
        {{/each}}
      </ul>
    </div>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
    {{/unless}}
  </div>
</div>
