<nav class="navigation navigation--{{type}}{{#if images}} navigation--has-images{{else}} navigation--no-images{{/if}}" role="navigation">
  <ul class="navigation__list">
    {{#each navigation}}
      <li
        class="js-nav-item navigation__item {{nav_class_names title}} {{additional_nav_class}}"
        data-lpa-category="Destinations Next"
        data-lpa-action="Global Navigation Click"
        data-lpa-label="{{title}}">
        <a class="navigation__link" href="{{slug}}"{{#if hidden}} hidden{{/if}}>
          {{title}}
        </a>

        {{#if submenu.items.length}}
          <div class="sub-navigation">
            {{#if submenu.featured}}
              <a class="sub-navigation-feature" href="{{submenu.featured.link}}">
                <img
                  class="sub-navigation-feature__image"
                  src="{{submenu.featured.image}}"
                  alt="{{submenu.featured.title}}">

                <div class="sub-navigation-feature__text">
                  <div class="sub-navigation-feature__title">
                    {{submenu.featured.title}}
                  </div>

                  <div class="sub-navigation-feature__subtitle">
                    {{submenu.featured.subtitle}}
                  </div>
                </div>
              </a>
            {{/if}}

            <ul class="sub-navigation__list">
              {{#each submenu.items}}
                <li class="sub-navigation__item{{#if current}} sub-navigation__item--current{{/if}}">
                  <a class="sub-navigation__link" href="{{slug}}">
                    {{title}}
                  </a>
                </li>
              {{/each}}
            </ul>

            {{#if submenu.call_to_action}}
              <a class="sub-navigation__button" href="{{submenu.call_to_action.slug}}">
                {{submenu.call_to_action.title}}
                <i class="icon-chevron-right" aria-hidden="true"></i>
              </a>
            {{/if}}
          </div>
        {{/if}}
      </li>
    {{/each}}
  </ul>

  <nav class="mobile-navigation mobile-navigation--hidden">
    <button class="mobile-navigation__close icon-close-small js-close">Close</button>

    <header class="mobile-navigation__header js-mobile-navigation-header"></header>

    <ul class="mobile-navigation__list">
      {{#each navigation}}
        <li
          class="js-nav-item mobile-navigation__item mobile-{{nav_class_names title}}"
          data-lpa-category="Destinations Next"
          data-lpa-action="Mobile Global Navigation Click"
          data-lpa-label="{{title}}">
          <a class="mobile-navigation__link" href="{{slug}}">
            {{title}}

            {{#if submenu}}
              <i class="icon icon--chevron-down" aria-hidden="true"></i>
            {{/if}}
          </a>


          {{#if submenu.items.length}}
            <div class="mobile-sub-navigation">
              {{#if submenu.featured}}
                <a class="sub-navigation-feature" href="{{submenu.featured.link}}">
                  <img
                    class="sub-navigation-feature__image"
                    src="{{submenu.featured.image}}"
                    alt="{{submenu.featured.title}}">

                  <div class="sub-navigation-feature__text">
                    <div class="sub-navigation-feature__title">
                      {{submenu.featured.title}}
                    </div>

                    <div class="sub-navigation-feature__subtitle">
                      {{submenu.featured.subtitle}}
                    </div>
                  </div>
                </a>
              {{/if}}

              <ul class="sub-navigation__list">
                {{#each submenu.items}}
                  <li class="sub-navigation__item{{#if current}} sub-navigation__item--current{{/if}}">
                    <a class="sub-navigation__link" href="{{slug}}">
                      {{title}}
                    </a>
                  </li>
                {{/each}}

                {{#if submenu.call_to_action}}
                  <li class="sub-navigation__item">
                    <a class="sub-navigation__link" href="{{submenu.call_to_action.slug}}">
                      {{submenu.call_to_action.title}}
                    </a>
                  </li>
                {{/if}}
              </ul>
            </div>
          {{/if}}
        </li>
      {{/each}}
    </ul>
  </nav>
</nav>
