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

<aside class="{{@root.prefix}}--panel--overlay" id="switcher-{{switcher.idSuffix}}" data-product-switcher>
  <div class="{{@root.prefix}}--product-switcher">
    <div class="{{@root.prefix}}--product-switcher__search">
      <div class="{{@root.prefix}}--form-item">
        <div data-search class="{{@root.prefix}}--search {{@root.prefix}}--search--sm {{@root.prefix}}--search--shell"
          role="search">
          <label id="search-input-label-1" class="{{@root.prefix}}--label" for="search__input-1">Search</label>
          <input class="{{@root.prefix}}--search-input" type="text" role="search" id="search__input-1" placeholder="Search all products"
            aria-labelledby="search-input-label-2">
          <svg class="{{@root.prefix}}--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
            <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
              fill-rule="nonzero" />
          </svg>
          <button class="{{@root.prefix}}--search-close {{@root.prefix}}--search-close--hidden" title="Clear search input"
            aria-label="Clear search input">
            <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
                fill-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    {{#if switcher.state.showAll}}
    <div class="{{@root.prefix}}--product-switcher__item">
      <button aria-label="Back" tabindex="0" class="{{@root.prefix}}--product-switcher__back-btn">
        <svg class="{{@root.prefix}}--product-switcher__back-arrow" width="20" height="20" viewBox="0 0 16 14">
          <path d="M4.044 8.003l4.09 3.905-1.374 1.453-6.763-6.356L6.759.639 8.135 2.09 4.043 6.003h11.954v2H4.044z" />
        </svg>
        Back
      </button>
    </div>
    <ul class="{{@root.prefix}}--product-switcher__product-list">
      {{#each switcher.allLinks}}
      <li class="{{@root.prefix}}--product-list__item">
        <a class="{{@root.prefix}}--product-link" tabindex="0" href="javascript:void(0)">
          <div class="{{@root.prefix}}--product-switcher__icon">
            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
            </svg>
          </div>
          <span class="{{@root.prefix}}--product-link__name">{{ this.title }}</span>
        </a>
        <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="{{@root.prefix}}--overflow-menu">
          <svg class="{{@root.prefix}}--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
            <g fill-rule="evenodd">
              <circle cx="1.5" cy="1.5" r="1.5" />
              <circle cx="1.5" cy="7.5" r="1.5" />
              <circle cx="1.5" cy="13.5" r="1.5" />
            </g>
          </svg>
          <ul class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1"
            data-floating-menu-direction="bottom">
            <li class="{{@root.prefix}}--overflow-menu-options__option {{@root.prefix}}--overflow__item">
              <button class="{{@root.prefix}}--overflow-menu-options__btn" title="Option 1"
                data-floating-menu-primary-focus>Option 1</button>
            </li>
            <li class="{{@root.prefix}}--overflow-menu-options__option">
              <button class="{{@root.prefix}}--overflow-menu-options__btn">Option 2</button>
            </li>
          </ul>
        </div>
      </li>
      {{/each}}
    </ul>
    {{else}}
    <p class="{{@root.prefix}}--product-switcher__subheader">My Products</p>
    <ul class="{{@root.prefix}}--product-switcher__product-list">
      {{#each switcher.links}}
      <li class="{{@root.prefix}}--product-list__item">
        <a class="{{@root.prefix}}--product-link" tabindex="0" href="javascript:void(0)">
          <div class="{{@root.prefix}}--product-switcher__icon">
            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
            </svg>
          </div>
          <span class="{{@root.prefix}}--product-link__name">{{ this.title }}</span>
        </a>
        <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="{{@root.prefix}}--overflow-menu">
          <svg width="3" height="15" viewBox="0 0 3 15">
            <path d="M0 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M0 13.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0"></path>
          </svg>
          <ul class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1"
            data-floating-menu-direction="bottom">
            <li class="{{@root.prefix}}--overflow-menu-options__option {{@root.prefix}}--overflow__item">
              <button class="{{@root.prefix}}--overflow-menu-options__btn" title="Option 1"
                data-floating-menu-primary-focus>Option 1</button>
            </li>
            <li class="{{@root.prefix}}--overflow-menu-options__option">
              <button class="{{@root.prefix}}--overflow-menu-options__btn">Option 2</button>
            </li>
          </ul>
        </div>
      </li>
      {{/each}}
    </ul>

    {{#if switcher.state.showAll}}
    {{else}}
    <div class="{{@root.prefix}}--product-switcher__item">
      <button aria-label="Show All Applications" tabindex="0" class="{{@root.prefix}}--product-switcher__all-btn">
        View all products
      </button>
    </div>
    {{/if}}
    {{/if}}
  </div>
</aside>
