<!--
  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}}--navigation" id="navigation-menu-{{navigationMenu.idSuffix}}"
  {{#unless navigationMenu.state.expanded}} hidden{{/unless}} data-navigation-menu>
  {{#each navigationMenu.sections}} <div class="{{@root.prefix}}--navigation-section">
    <ul class="{{@root.prefix}}--navigation-items">
      {{#each this.items}}
      {{#if this.active}}
      {{#if this.hasIcon}}
      <li
        class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--active {{@root.prefix}}--navigation-item--icon">
        {{else}}
      <li class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--active">
        {{/if}}
        {{else}}
        {{#if this.hasIcon}}
      <li class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--icon">
        {{else}}
      <li class="{{@root.prefix}}--navigation-item">
        {{/if}}
        {{/if}}
        {{#eq this.type "link"}}
        <a class="{{@root.prefix}}--navigation-link" href="{{ this.href }}">
          {{#if this.hasIcon}}
          <div class="{{@root.prefix}}--navigation-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>
          {{/if}}
          {{ this.title }}
        </a>
        {{/eq}}
        {{#eq this.type "category"}}
        {{#if ../../navigationMenu.state.category}}
        <div class="{{@root.prefix}}--navigation__category {{@root.prefix}}--navigation__category--expanded">
          {{else}}
          <div class="{{@root.prefix}}--navigation__category">
            {{/if}}
            <button class="{{@root.prefix}}--navigation__category-toggle" aria-haspopup="true" aria-expanded="false"
              aria-controls="category-1-menu">
              {{#if this.hasIcon}}
              <div class="{{@root.prefix}}--navigation-icon">

                <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                  <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>
              {{/if}}
              <div class="{{@root.prefix}}--navigation__category-title">
                {{ this.title }}
                <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                  <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
                </svg>
              </div>
            </button>
            <ul id="category-1-menu" class="{{@root.prefix}}--navigation__category-items">
              {{#each this.links}}
              {{#if this.active}}
              <li
                class="{{@root.prefix}}--navigation__category-item {{@root.prefix}}--navigation__category-item--active">
                {{else}}
              <li class="{{@root.prefix}}--navigation__category-item">
                {{/if}}
                <a class="{{@root.prefix}}--navigation-link" href="{{ this.href }}">
                  {{ this.title }}
                </a>
              </li>
              {{/each}}
            </ul>
          </div>
          {{/eq}}
      </li>
      {{/each}}
    </ul>
  </div>
  {{/each}}
</div>
