<!--
  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">Multi-Select label</label>
    <div
      class="{{@root.prefix}}--multi-select {{@root.prefix}}--list-box {{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}{{#if filterable}} {{@root.prefix}}--combo-box {{@root.prefix}}--multi-select--filterable{{/if}}">
      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
        aria-expanded="false" aria-haspopup="true">
        {{#if filterable}}
        <input class="{{@root.prefix}}--text-input" placeholder="Filter...">
        {{else}}
        <span class="{{@root.prefix}}--list-box__label">Multi select options</span>
        {{/if}}
        <div class="{{@root.prefix}}--list-box__menu-icon">
          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
        </div>
      </div>
    </div>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
    {{/unless}}
  </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">Multi-Select label</label>
    <div
      class="{{@root.prefix}}--multi-select {{@root.prefix}}--list-box {{@root.prefix}}--list-box--expanded {{@root.prefix}}--multi-select--selected{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}{{#if filterable}} {{@root.prefix}}--combo-box {{@root.prefix}}--multi-select--filterable{{/if}}">
      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="close menu"
        aria-expanded="true" aria-haspopup="true">
        <div role="button"
          class="{{@root.prefix}}--list-box__selection {{@root.prefix}}--list-box__selection--multi {{@root.prefix}}--tag--filter"
          tabindex="0" title="Clear all selected items">
          1
          {{ carbon-icon 'Close16' aria-label='Clear selection' }}
        </div>
        {{#if filterable}}
        <input class="{{@root.prefix}}--text-input" placeholder="Filter...">
        {{else}}
        <span class="{{@root.prefix}}--list-box__label">Multi select options</span>
        {{/if}}
        <div class="{{@root.prefix}}--list-box__menu-icon">
          {{ carbon-icon 'ChevronUp16' aria-label='Close menu' }}
        </div>
      </div>
      <fieldset class="{{@root.prefix}}--list-box__menu" role="listbox">
        <legend class="{{@root.prefix}}--assistive-text">Description of form elements within the fieldset</legend>
        {{#each items}}
        <div class="{{@root.prefix}}--list-box__menu-item">
          <div class="{{@root.prefix}}--list-box__menu-item__option">
            <div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
              <label title="{{label}}" class="{{@root.prefix}}--checkbox-label">
                <input type="checkbox" name="Option 1" readonly="" class="{{@root.prefix}}--checkbox" id="{{id}}"
                  value="on" {{#if selected}} checked{{/if}}>
                <span class="{{@root.prefix}}--checkbox-appearance"></span>
                <span class="{{@root.prefix}}--checkbox-label-text">{{label}}</span>
              </label>
            </div>
          </div>
        </div>
        {{/each}}
      </fieldset>
    </div>
    {{#unless inline}}
    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
    {{/unless}}
  </div>
</div>
