{#
 Header component. Implements the <header> tag.
  Includes following sections/elements:
    - Logo with link.
    - Site title with link.
    - Site slogan.
    - Primary site navigation.
    - Page tools navigation (e.g. i18n, search etc.)

  Variables:
    - header: Object, contains variables specific to header.
    - site: Object, contains variables for entire site (global-ish.)
    - See details below:
    - header.nav: An object containing a hierarchical navigation structure, used for the primary navigation; uses the Nav component to render (see ../nav/nav.twig).
    - header.tools: An object containing a hierarchical nav. structure used for the 'tools' navigation; uses the Nav component to render.
    - site.logo: Object containing logo variables (see ../logo/logo.twig).
    - site.logo_url: String, url for logo.
    - site.name: String, name of site.
    - site.slogan: String, supplementary text along the site name.
    - site.root_url: String, url to root of site.
    - hugeHeader: String, CSS classname, dynamic modifier depends on number of items in header.nav.items. Used to conditionally render primary nav in different places in this template.
    - search: Object, contains variables for configuring search sub-template.
    - search.show_modal: Boolean, show search modal.
    - search.suggestions: Boolean , show suggestions in search modal.
#}

{# Sets hugeHeader to supply the modifier 'mds-header--huge' for any nav that has more than 6 items in it; re-arranges the markup to accomodate it better. #}
{#TODO: hugeHeader should be set by a boolean - item word length is unreliable.#}

{% set headerType = "large" %}
{% set headerClass = "mds-header--huge" %}

{# Default search_show_modal to true. #}
{% set search_show_modal = search.show_modal|default (true) %}

<!-- Header section, semantic container for logo, navigation etc. -->
<header class="mds-header {{ headerClass }}" data-testid="mds-header" data-elastic-exclude>
  <!-- Contains header content for styling per device size etc. -->
  <div class="mds-header__content mds-container">

    <!-- Site logo, name link and slogan. -->
    <div class="mds-header__branding">
      <div class="mds-header__site-name-and-slogan">
        {# Render site name link if exists. #}
        {% if site.name %}
          {# Embed link template with url to root. #}
          {% embed '@mds/links/link.twig' with {
            link_url: site.root_url,
          }%}
            {% block link_content %}
              <h1 class="mds-header__name">{{ site.name }}</h1>
            {% endblock%}
          {% endembed %}
        {% endif %}
        {# Render slogan if exists. #}
        {% if site.slogan %}
          <p class="mds-header__slogan">{{ site.slogan }} </p>
        {% endif %}
      </div>

      <!-- This has to come after main header in source order for a11y reasons. It is changed in CSS to be 1st in visual order. -->
      <div class="mds-header__logo">
        {# Embedd link with Logo component as content. #}
          {% embed '@mds/links/link.twig' with {
            link_url: site.logo_url,
            link_attributes: {rel:'shortcut', title:'McGill University'}
          }%}
            {% block link_content %}
              {# Use logo component to render logo. #}
              {% include '@mds/logo/logo.twig' with {
                logo_src: site.logo.logo_src,
                logo_alt: site.logo.logo_alt,
                logo_modifiers: "mds-logo--sm"
              }%}
            {% endblock %}
        {% endembed %}
      </div>
    </div>

    <!-- Wrapper for header primary navigation and other nav. items. -->
    <div class="mds-header__nav-wrapper">
      {# TODO: ADD 'small' icon 'home-sharp' to home nav item - when links are improved to accept an icon as well as url etc. Nav data will have to reflect this change - nav item must then have an 'icon' key. #}

        {# Header 'tools' - usually search link and lang toggle. #}
        <section aria-label="navigation"
          class="mds-nav mds-nav--supplementary mds-nav--tools" >
        <ul class="mds-nav__list">
          {# Include search button if search_show_modal isn't unset. #}
          {% if search_show_modal  %}
          <li class="mds-nav__item">
            <mds-toggle context="search-dialog">
            
              {# TODO: decide if this should be it's own custom component or just use this markup, which is valid. #}
              <ion-icon
                class="mds-button__ionicon"
                data-testid="ionicon"
                name="search"
                alt="open the search dialog"
                size="large"
                aria-label="search"
              ></ion-icon>
            </mds-toggle>
          </li>
          {% endif %}
          <li class="mds-nav__item">
            <a class="mds-nav__link mds-link--site-toggle" href="/fr">FR</a>
          </li>
        </ul>
        </section>

        {# Include menu button for mobile devices. #}
        <mds-toggle-menu class="mds-header__mb-menu" context="menu-primary"></mds-toggle-menu>
    </div>
  </div>
  <hr class="mds-divider">

  {# Includes a Nav component as primary nav. using provided header nav data only - no other context variables. #}
  <mds-toggle-view-fade context="menu-primary" onstate>
    {% include '@mds/navigation/nav.twig' with {'nav': header.nav} only %}
  </mds-toggle-view-fade>

  {# Search Modal Dialog with optional search.suggestions parameter if search.show_modal true. #}
  {% if search_show_modal %}
    {% include '@mds/header/search-modal.twig' with {'suggestions': search.suggestions} only %}
  {% endif %}
</header>