<!-- 
  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}}--toolbar" data-toolbar>
  <div class="{{@root.prefix}}--search {{@root.prefix}}--search--sm {{@root.prefix}}--toolbar-search" role="search" data-search data-toolbar-search>
    <label for="search__input" class="{{@root.prefix}}--label">Search</label>
    <input type="text" class="{{@root.prefix}}--search-input" id="search__input" placeholder="Search">
    <button class="{{@root.prefix}}--toolbar-search__btn" aria-label="Toolbar search">
      {{ carbon-icon 'Search16' class=(add @root.prefix '--search-magnifier') }}
    </button>
    <button class="{{@root.prefix}}--search-close {{@root.prefix}}--search-close--hidden" title="Clear search
        input" aria-label="Clear search input">
      {{ carbon-icon 'Close16' }}
    </button>
  </div>
  <div data-overflow-menu class="{{@root.prefix}}--overflow-menu" tabindex="0" aria-label="List of options">
    {{ carbon-icon 'Filter16' class=(add (add @root.prefix '--overflow-menu__icon ') (add @root.prefix '--toolbar-filter-icon')) }}
    <ul class="{{@root.prefix}}--overflow-menu-options">
      <li class="{{@root.prefix}}--toolbar-menu__title">FILTER BY</li>
      {{#each filterOptions}}
        <li class="{{@root.prefix}}--toolbar-menu__option">
          <input id="{{id}}" class="{{@root.prefix}}--checkbox" type="checkbox" value="{{value}}" name="checkbox"{{#if primaryFocus}} data-floating-menu-primary-focus{{/if}}>
          <label for="{{id}}" class="{{@root.prefix}}--checkbox-label">{{label}}</label>
        </li>
      {{/each}}
    </ul>
  </div>
  <div data-overflow-menu class="{{@root.prefix}}--overflow-menu" tabindex="0" aria-label="List of options">
    {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
    <ul class="{{@root.prefix}}--overflow-menu-options">
      <li class="{{@root.prefix}}--overflow-menu-options__option">
        <button type="button" class="{{@root.prefix}}--overflow-menu-options__btn">Refresh table</button>
      </li>
      <hr class="{{@root.prefix}}--toolbar-menu__divider" />
      <li class="{{@root.prefix}}--toolbar-menu__title">ROW HEIGHT</li>
      <fieldset data-row-height class="{{@root.prefix}}--radio-button-group">
        <legend class="{{@root.prefix}}--visually-hidden">Select table row height</legend>
        {{#each rowHeightOptions}}
          <li class="{{@root.prefix}}--toolbar-menu__option">
            <input id="{{id}}" class="{{@root.prefix}}--radio-button" type="radio" value="{{value}}" name="radio"{{#if selected}} checked{{/if}}{{#if primaryFocus}} data-floating-menu-primary-focus{{/if}}>
            <label for="{{id}}" class="{{@root.prefix}}--radio-button__label">
              <span class="{{@root.prefix}}--radio-button__appearance"></span>
              {{label}}
            </label>
          </li>
        {{/each}}
      </fieldset>
    </ul>
  </div>
</div>
