<!--
  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.
-->

{{#if @root.featureFlags.componentsX}}
<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">
        {{#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>
{{else}}
<div
  class="{{@root.prefix}}--form-item {{@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">Label</span>
    <div class="{{@root.prefix}}--list-box__menu-icon">
      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10"
        aria-label="Open menu">
        <title>Open menu</title>
        <path d="M10 0L5 5 0 0z"></path>
      </svg>
    </div>
  </div>
</div>
<div
  class="{{@root.prefix}}--form-item {{@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="close menu" aria-expanded="true"
    aria-haspopup="true">
    <span class="{{@root.prefix}}--list-box__label">Label</span>
    <div class="{{@root.prefix}}--list-box__menu-icon {{@root.prefix}}--list-box__menu-icon--open">
      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10"
        aria-label="Close menu">
        <title>Close menu</title>
        <path d="M10 0L5 5 0 0z"></path>
      </svg>
    </div>
  </div>
  <div class="{{@root.prefix}}--list-box__menu">
    {{#each items}}
    <div
      class="{{@root.prefix}}--list-box__menu-item{{#if selected}} {{@root.prefix}}--list-box__menu-item--highlighted{{/if}}"
      id="{{id}}">{{label}}</div>
    {{/each}}
  </div>
</div>
{{/if}}
