{{#if nativeMobile}}
  <div class="visible-xs-inline">
    {{yield}}
    {{partial "components/native-select"}}
  </div>
{{/if}}

<div class="bs-select dropdown {{if isDropUp 'dropup'}} {{if nativeMobile 'hidden-xs'}} {{if disabled 'disabled'}} {{if showDropdown 'open'}}"
     tabindex="0">
  <button type="button"
          {{action "showHide"}}
          class="btn dropdown-toggle {{buttonClass}} {{if disabled 'disabled'}}"
          id={{menuButtonId}}
          tabindex="-1"
          aria-expanded="true">
    <span class="pull-left" tabindex="-1">
      {{selectionSummary}}
      <span class={{if selectionBadge 'badge' 'caret'}} tabindex="-1">{{selectionBadge}}</span>
    </span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby={{menuButtonId}} tabindex="-1">
    <li tabindex="-1">
      {{yield}}
    </li>
    {{#if liveSearch}}
      <li tabindex="-1">
        {{input type="text"
                tabindex="-1"
                disabled=disabled
                class="search-filter form-control"
                value=searchFilter
                focus="preventClosing"}}
      </li>
    {{/if}}
    {{#if multiple}}
      <li tabindex="-1">
        {{#if splitAllNoneButtons}}
          <div class="btn-group select-all-none btn-block" role="group" aria-label="Select all or none" tabindex="-1">
            <button type="button"
                    disabled={{disabled}}
                    class="btn btn-default btn-xs"
                    {{action "selectAllNone" "unselectedContentList"}}
                    tabindex="-1">
              {{selectAllLabel}}
            </button>
            <button type="button"
                    disabled={{disabled}}
                    class="btn btn-default btn-xs"
                    {{action "selectAllNone" "selectedContentList"}}
                    tabindex="-1">
              {{selectNoneLabel}}
            </button>
          </div>
        {{else}}
          <button type="button" class="btn btn-default btn-xs btn-block" {{action "toggleSelectAllNone"}} tabindex="-1">
            {{selectAllNoneLabel}}
            <span class="check-mark glyphicon {{glyphiconClass}}" tabindex="-1"></span>
          </button>
        {{/if}}
      </li>
    {{/if}}
    {{#each nestedGroupContentList as |group|}}
      {{#unless group.items.firstObject.first}}<li class="divider" role="presentation" tabindex="-1"></li>{{/unless}}
      {{#if group.name}}<li class="dropdown-header" role="presentation" tabindex="-1">{{group.name}}</li>{{/if}}
      {{#each group.items as |item|}}
        <li role="presentation" tabindex="-1" class="{{if disabled 'disabled'}} {{if item.active 'active'}} {{if item.selected 'selected'}}">
          <a role="menuitem" data-itemid={{item.itemId}} tabindex="{{if item.active '0' '-1'}}" {{action "selectItem" item}}>
            {{item.label}}
            <span class="glyphicon glyphicon-ok check-mark {{if item.selected '' 'hidden'}}"></span>
          </a>
        </li>
      {{/each}}
    {{/each}}
  </ul>
</div>