{% macro tnaHeader(params) %}
{%- from 'components/phase-banner/macro.html' import tnaPhaseBanner -%}
{%- from 'partials/logo/macro.html' import tnaLogo -%}

{%- set containerClasses = [params.classes] if params.classes else [] -%}
<header class="tna-header {{ ' '.join(containerClasses) }}" data-module="tna-header" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
  {% if params.phaseBanner -%}
  {{ tnaPhaseBanner(params.phaseBanner) }}
  {% endif -%}
  <div class="tna-container tna-header__contents">
    <div class="tna-column tna-header__logo-wrapper">
      {% if params.logo and params.logo.href -%}
      <a href="{{ params.logo.href }}" class="tna-header__logo tna-header__logo--link" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}" aria-label="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}">
      {%- else %}
      <span class="tna-header__logo">
      {%- endif %}
          {{ tnaLogo({'adornable': True}) }}
        {%- if params.logo and params.logo.strapline -%}
        <span class="tna-header__logo-strapline">{{ params.logo.strapline }}</span>
        {%- endif -%}
      {%- if params.logo and params.logo.href %}
      </a>
      {%- else %}
      </span>
      {%- endif %}
    </div>
    {%- if params.navigation or params.topNavigation -%}
    <div class="tna-column tna-header__navigation-button-wrapper">
      <button class="tna-header__navigation-button" type="button" aria-controls="{{ 'tna-header__navigation' or params.navigationId }}" hidden>
        Menu
        <span class="tna-header__hamburger"></span>
      </button>
    </div>
    <nav class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-header__navigation" id="{{ 'tna-header__navigation' or params.navigationId }}" aria-label="Primary">
      {%- if params.navigation -%}
      <ul class="tna-header__navigation-items">
        {%- for item in params.navigation -%}
        <li class="tna-header__navigation-item">
          <a href="{{ item.href }}" class="tna-header__navigation-item-link{%- if item.selected %} tna-header__navigation-item-link--selected{% endif %}" tabindex="0" {%- if item.selected %} aria-current="page"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %}>
            {{ item.text }}
          </a>
        </li>
        {%- endfor -%}
      </ul>
      {%- endif -%}
      {%- if params.topNavigation -%}
      <ul class="tna-header__top-navigation-items">
        {%- for item in params.topNavigation -%}
        <li class="tna-header__top-navigation-item">
          <a href="{{ item.href }}" class="tna-header__top-navigation-item-link" tabindex="0" {%- if item.title %} title="{{ item.title }}"{% endif %}>
            {%- if item.brandIcon -%}
            <i class="fa-brands fa-{{ item.brandIcon }}" aria-hidden="true"></i>
            {%- elif item.icon -%}
            <i class="fa-solid fa-{{ item.icon }}" aria-hidden="true"></i>
            {%- endif -%}
            {{ item.text }}
          </a>
        </li>
        {%- endfor -%}
      </ul>
      {%- endif -%}
    </nav>
    {%- endif -%}
  </div>
</header>
{% endmacro %}