<!--
  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">
  {{#if featureFlags.componentsX}}
  <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
    {{/if}}
    <label for="dropdown-id" class="{{@root.prefix}}--label">Dropdown label</label>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
    {{/unless}}
    <ul data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value id="dropdown-id"
      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}}"
      tabindex="0">
      <li class="{{@root.prefix}}--dropdown-text">
        {{#unless inline}} Dropdown option {{else}}
        <span class="{{@root.prefix}}--dropdown-text__inner">Inline Dropdown label</span>
        {{/unless}}
        {{#unless inline}}
      </li>
      <li class="{{@root.prefix}}--dropdown__arrow-container">
        {{/unless}}
        {{#if featureFlags.componentsX}}
        {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
        {{else}}
        <svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
          <path d="M10 0L5 5 0 0z"></path>
        </svg>
        {{/if}}
      </li>
      <li>
        <ul class="{{@root.prefix}}--dropdown-list">
          {{#each items}}
          <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
            <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1">{{label}}</a>
          </li>
          {{/each}}
        </ul>
      </li>
    </ul>
    {{#if featureFlags.componentsX}}
  </div>
  {{/if}}
</div>

{{#unless inline}}
<div class="{{@root.prefix}}--form-item">
  {{#if featureFlags.componentsX}}
  <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
    {{/if}}
    <label for="dropdown-id-longer-helper-text" class="{{@root.prefix}}--label">Dropdown label</label>
    <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>
    <ul data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value id="dropdown-id-longer-helper-text"
      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}}"
      tabindex="0">
      <li class="{{@root.prefix}}--dropdown-text">
        {{#unless inline}} Dropdown option {{else}}
        <span class="{{@root.prefix}}--dropdown-text__inner">Inline Dropdown label</span>
        {{/unless}}
        {{#unless inline}}
      </li>
      <li class="{{@root.prefix}}--dropdown__arrow-container">
        {{/unless}}
        {{#if featureFlags.componentsX}}
        {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
        {{else}}
        <svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
          <path d="M10 0L5 5 0 0z"></path>
        </svg>
        {{/if}}
      </li>
      <li>
        <ul class="{{@root.prefix}}--dropdown-list">
          {{#each items}}
          <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
            <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1">{{label}}</a>
          </li>
          {{/each}}
        </ul>
      </li>
    </ul>
    {{#if featureFlags.componentsX}}
  </div>
  {{/if}}
</div>
{{/unless}}

<div class="{{@root.prefix}}--form-item">
  {{#if featureFlags.componentsX}}
  <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
    {{/if}}
    <label for="dropdown-id-disabled" class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">Dropdown
      label</label>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
      here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    {{/unless}}
    <ul data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value id="dropdown-id-disabled"
      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"
      tabindex="0">
      <li class="{{@root.prefix}}--dropdown-text">
        {{#unless inline}} Dropdown option {{else}}
        <span class="{{@root.prefix}}--dropdown-text__inner">Inline Dropdown label</span>
        {{/unless}}
        {{#unless inline}}
      </li>
      <li class="{{@root.prefix}}--dropdown__arrow-container">
        {{/unless}}
        {{#if featureFlags.componentsX}}
        {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
        {{else}}
        <svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
          <path d="M10 0L5 5 0 0z"></path>
        </svg>
        {{/if}}
      </li>
      <li>
        <ul class="{{@root.prefix}}--dropdown-list">
          {{#each items}}
          <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
            <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1">{{label}}</a>
          </li>
          {{/each}}
        </ul>
      </li>
    </ul>
    {{#if featureFlags.componentsX}}
  </div>
  {{/if}}
</div>

<div class="{{@root.prefix}}--form-item">
  {{#if featureFlags.componentsX}}
  <div
    class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline {{@root.prefix}}--dropdown__wrapper--inline--invalid{{/if}}">
    {{/if}}
    <label for="dropdown-id-invalid" class="{{@root.prefix}}--label">Dropdown
      label</label>
    {{#unless inline}}
    <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>
    {{/unless}}
    <ul data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value id="dropdown-id-invalid"
      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}}"
      tabindex="0" data-invalid>
      {{#if featureFlags.componentsX}}
      {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--dropdown__invalid-icon')}}
      {{/if}}
      <li class="{{@root.prefix}}--dropdown-text">
        {{#unless inline}} Dropdown option {{else}}
        <span class="{{@root.prefix}}--dropdown-text__inner">Inline Dropdown label</span>
        {{/unless}}
        {{#unless inline}}
      </li>
      <li class="{{@root.prefix}}--dropdown__arrow-container">
        {{/unless}}
        {{#if featureFlags.componentsX}}
        {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
        {{else}}
        <svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
          <path d="M10 0L5 5 0 0z"></path>
        </svg>
        {{/if}}
      </li>
      <li>
        <ul class="{{@root.prefix}}--dropdown-list">
          {{#each items}}
          <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
            <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1">{{label}}</a>
          </li>
          {{/each}}
        </ul>
      </li>
    </ul>
    {{#if inline}}
    <div class="{{@root.prefix}}--form-requirement">
      This is not a validation message
    </div>
    {{/if}}
    {{#if featureFlags.componentsX}}
  </div>
  {{/if}}
  {{#unless inline}}
  <div class="{{@root.prefix}}--form-requirement">
    This is not a validation message
  </div>
  {{/unless}}
</div>
