{# Attach libraries #}
{% if not localgov_base_remove_js %}
  {{ attach_library('localgov_base/header-js') }}
{% endif %}

<header class="lgd-header">
  <div class="lgd-container">
    <div class="lgd-row">
      <div class="lgd-row__full">
        <div class="lgd-header__inner">

          {{ page.header }}

          <div class="lgd-header__content">
            {% if has_utility %}
              {{ page.utility }}
            {% endif %}

            {% if has_search %}
              {{ page.search }}
            {% endif %}

            {% if has_primary_menu %}
              <button
                class="lgd-header__toggle lgd-header__toggle--primary"
                data-target="lgd-header__nav--primary"
                aria-controls="lgd-header__nav--primary"
                aria-expanded="false"
              >
                <span class="lgd-header__toggle-text lgd-header__toggle-text--primary">{{ 'Menu'|t }}</span>
                <span class="lgd-header__toggle-icon lgd-header__toggle-icon--primary"></span>
              </button>
            {% endif %}
          </div>

        </div>
      </div>
    </div>
  </div>
  {% if has_primary_menu or has_secondary_menu %}
    {#
      The "Header Toggles" section sets a number of buttons to activate
      - the primary menu/search regions on small screens, and
      - the secondary region on all screen sizes (region where we expect
        the services menu will be positioned).
    #}
    <div class="lgd-header__menus">
      <div class="lgd-container">
        <div class="lgd-row">
          <div class="lgd-row__full lgd-header__menus-inner">
            <div class="lgd-header__toggles">
              {% if has_secondary_menu %}
                <button
                  class="lgd-header__toggle lgd-header__toggle--secondary"
                  data-target="lgd-header__nav--secondary"
                  aria-controls="lgd-header__nav--secondary"
                  aria-expanded="false"
                  aria-label="{{ 'Services: jump to services'|t }}"
                >
                  <span class="lgd-header__toggle-text lgd-header__toggle-text--secondary">{{ 'Services'|t }}</span>
                  <span class="lgd-header__toggle-icon lgd-header__toggle-icon--secondary"></span>
                </button>
              {% endif %}
            </div>

            {% if has_primary_menu %}
              <div id="lgd-header__nav--primary" class="lgd-header__nav lgd-header__nav--primary">

                {% if has_primary_menu %}
                  {{ page.primary_menu }}
                {% endif %}
              </div>
            {% endif %}

            {% if has_secondary_menu %}
              <div id="lgd-header__nav--secondary" class="lgd-header__nav lgd-header__nav--secondary">
                {{ page.secondary_menu }}
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  {% endif %}

  {% if has_subsites_menu %}
    <div id="lgd-header__nav--subsites-menu" class="lgd-header__nav lgd-header__nav--subsites-menu">
      {{ page.subsites_menu }}
    </div>
  {% endif %}
</header>
