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

<div class="bs-select {{if nativeMobile 'hidden-xs'}} {{if disabled 'disabled'}}">
  {{yield}}

  {{#if liveSearch}}
    <div class="input-group">
      {{input type="text" class="search-filter form-control" value=searchFilter focus="preventClosing"}}
      <span class="input-group-btn">
        <button type="button"
                class="btn btn-default list-picker-clear-filter"
                disabled={{clearSearchDisabled}}
                {{action "clearFilter"}}>
          <span class="glyphicon glyphicon-remove"></span>
        </button>
      </span>
    </div>
  {{/if}}
  {{#if multiple}}
    {{#if splitAllNoneButtons}}
      <div class="btn-group select-all-none" role="group" aria-label="Select all or none">
        <button type="button" class="btn btn-default" {{action "selectAllNone" "unselectedContentList"}}>{{selectAllLabel}}</button>
        <button type="button" class="btn btn-default" {{action "selectAllNone" "selectedContentList"}}>{{selectNoneLabel}}</button>
      </div>
    {{else}}
      <div role="group" class="btn-group-vertical btn-block">
        <button type="button" class="btn btn-default" {{action "toggleSelectAllNone"}}>
          {{selectAllNoneLabel}}
          <span class="check-mark glyphicon {{glyphiconClass}}"></span>
        </button>
      </div>
    {{/if}}
  {{/if}}
  {{#each nestedGroupContentList as |group|}}
    {{#if group.name}}<h4 role="presentation">{{group.name}}</h4>{{/if}}
    <div role="group" class="btn-group-vertical btn-block list-picker-items-container">
      {{#each group.items as |item|}}
        <button role="presentation"
                {{action "selectItem" item}}
                class="btn btn-default {{if item.selected 'active'}}">
          {{item.label}}
          <span class="glyphicon glyphicon-ok check-mark {{unless item.selected 'invisible'}}"></span>
        </button>
      {{/each}}
    </div>
  {{/each}}
</div>