{# 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 }}

          {% if has_primary_menu or has_search 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__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 %}

              {% if has_primary_menu or has_search %}
                <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>

            {% if has_primary_menu or has_search %}
              <div id="lgd-header__nav--primary" class="lgd-header__nav lgd-header__nav--primary">
                {% if has_primary_menu %}
                  {{ page.primary_menu }}
                {% endif %}

                {% if has_search %}
                  {{ page.search }}
                {% endif %}
              </div>
            {% endif %}

          {% 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>
  {% 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>
