<!--
  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}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
    <label class="{{@root.prefix}}--label">List box label</label>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
    {{/unless}}
    <div
      class="{{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
        aria-expanded="false" aria-haspopup="true">
        <span class="{{@root.prefix}}--list-box__label">List box options</span>
        <div class="{{@root.prefix}}--list-box__menu-icon">
          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
        </div>
      </div>
    </div>
  </div>
</div>

<div class="{{@root.prefix}}--form-item">
  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
    <label class="{{@root.prefix}}--label">List box label</label>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
    {{/unless}}
    <div
      class="{{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
      data-invalid>
      {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
        aria-expanded="false" aria-haspopup="true">
        <span class="{{@root.prefix}}--list-box__label">List box options</span>
        <div class="{{@root.prefix}}--list-box__menu-icon">
          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
        </div>
      </div>
    </div>
    <div class="{{@root.prefix}}--form-requirement">
      Validation message here
    </div>
  </div>
</div>

<div class="{{@root.prefix}}--form-item">
  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
    <label class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">List box label</label>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
      here
    </div>
    {{/unless}}
    <div
      class="{{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
      data-invalid>
      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
        aria-expanded="false" aria-haspopup="true">
        <span class="{{@root.prefix}}--list-box__label">List box options</span>
        <div class="{{@root.prefix}}--list-box__menu-icon">
          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
        </div>
      </div>
    </div>
    <div class="{{@root.prefix}}--form-requirement">
      Validation message here
    </div>
  </div>
</div>

<div class="{{@root.prefix}}--form-item">
  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
    <label class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">List box label</label>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
      here
    </div>
    {{/unless}}
    <div
      class="{{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
        aria-expanded="false" aria-haspopup="true">
        <span class="{{@root.prefix}}--list-box__label">List box options</span>
        <div class="{{@root.prefix}}--list-box__menu-icon">
          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
        </div>
      </div>
    </div>
  </div>
</div>

<div class="{{@root.prefix}}--form-item">
  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
    <label class="{{@root.prefix}}--label">List box label</label>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text">Optional helper text
      here
    </div>
    {{/unless}}
    <div
      class="{{@root.prefix}}--list-box {{@root.prefix}}--list-box--expanded{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="close menu"
        aria-expanded="true" aria-haspopup="true">
        <span class="{{@root.prefix}}--list-box__label">List box options</span>
        <div class="{{@root.prefix}}--list-box__menu-icon {{@root.prefix}}--list-box__menu-icon--open">
          {{ carbon-icon 'ChevronDown16' aria-label='Close menu' }}
        </div>
      </div>
      <ul class="{{@root.prefix}}--list-box__menu" role="combobox">
        {{#each items}}
        <li
          class="{{@root.prefix}}--list-box__menu-item{{#if selected}} {{@root.prefix}}--list-box__menu-item--highlighted{{/if}}"
          id="{{id}}">
          <div class="{{@root.prefix}}--list-box__menu-item__option" tabindex="0">
            {{label}}
          </div>
        </li>
        {{/each}}
      </ul>
    </div>
  </div>
</div>
