<nav aria-labelledby="{{id_prefix}}-navigation-menu-heading"
     class="lbcamden-header__content"
     data-module="super-navigation-mega-menu">
  {% if params.navigation and params.navigation | length %}
    <h2 id="{{ id_prefix }}-navigation-menu-heading" class="govuk-visually-hidden">
      {% if site_name%}{{site_name}} n{% else %}N{% endif%}avigation menu
    </h2>
    <button aria-controls="{{id_prefix}}-navigation-menu"
      aria-expanded="true" aria-label="Show{% if site_name %} {{site_name}}{% endif %} navigation menu"
      class="lbcamden-header__navigation-top-toggle-button {% if params.search === false %}lbcamden-header__navigation-top-toggle-button--no-search{% endif %}"
      data-toggle-desktop-group="hidden"
      data-toggle-mobile-group="top"
      data-tracking-key="menu"
      hidden
      id="{{id_prefix}}-navigation-menu-toggle"
      type="button">
        <span class="lbcamden-header__navigation-top-toggle-button-inner">
          Menu
        </span>
    </button>
    <ul id="{{id_prefix}}-navigation-menu" class="lbcamden-header__navigation-items">
      {% for menuItem in params.navigation %}
        <li
          class="lbcamden-header__navigation-item{% if menuItem.subItems %} lbcamden-header__navigation-item--with-children{% endif %}">
          <div class="lbcamden-header__navigation-toggle-wrapper govuk-clearfix">
            <a class="lbcamden-header__navigation-item-link{% if menuItem.classes %} {{ menuItem.classes }}{% endif %}"
               href="{{ menuItem.href }}">
              <span class="lbcamden-header__navigation-item-link-inner">
                {{ menuItem.text }}
              </span>
            </a>
            {% if menuItem.subItems %}
            <button aria-controls="{{id_prefix}}-navigation-menu__section-{{ loop.index }}"
                    aria-expanded="false"
                    aria-label="Show {{ menuItem.text }} menu"
                    class="lbcamden-header__navigation-second-toggle-button"
                    data-text-for-hide="Hide {{ menuItem.text }} menu"
                    data-text-for-show="Show {{ menuItem.text }} menu"
                    data-toggle-desktop-group="top"
                    data-toggle-mobile-group="second"
                    hidden="hidden"
                    type="button">
              <span class="lbcamden-header__navigation-second-toggle-button-inner">{{ menuItem.text }}</span></button>
            {% endif %}
          </div>
          {% if menuItem.subItems %}
          <div hidden class="lbcamden-header__navigation-dropdown-menu"
               id="{{id_prefix}}-navigation-menu__section-{{ loop.index }}">
            <div class="govuk-width-container lbcamden-header__width-container">
              <div class="govuk-grid-row">
                {% if menuItem.description %}
                <div class="govuk-grid-column-one-third-from-desktop">
                  <p class="govuk-body-l lbcamden-header__menu-description">
                    {{ menuItem.description }}
                  </p>
                </div>
                <div class="govuk-grid-column-two-thirds-from-desktop">
                  <ul
                    class="lbcamden-header__navigation-second-items lbcamden-header__navigation-second-items--topics">
                {% else %}
                <div class="govuk-grid-column-full">
                  <ul
                    class="lbcamden-header__navigation-second-items lbcamden-header__navigation-second-items--full lbcamden-header__navigation-second-items--topics">
                {% endif %}
                    {% for item in menuItem.subItems %}
                      <li class="lbcamden-header__dropdown-list-item">
                        <a class="govuk-link lbcamden-header__navigation-second-item-link"
                           href="{{ item.href }}">{{ item.text }}</a>
                        {% if item.description %}
                          <p class="lbcamden-header__navigation-second-item-description">
                            {{ item.description }}</p>
                        {% endif %}
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              </div>
            </div>
          </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
 {% include './search.njk' %}
</nav>
