{% from "nhsuk/components/input/macro.njk" import input as nhsukInput %}
{% from "nhsuk/components/button/macro.njk" import button as nhsukButton %}
{% from "nhsuk/macros/attributes.njk" import nhsukAttributes %}
{% from "nhsuk/macros/icon.njk" import nhsukIcon %}

{#- Set classes for this component #}
{%- set classNames = "nhsuk-header" -%}
{%- set classNamesNavigation = "nhsuk-header__navigation" -%}

{%- if params.colour and params.colour in ["white"] and (not params.classes or not "nhsuk-header--white" in params.classes) %}
  {% set classNames = classNames ~ " nhsuk-header--" ~ params.colour %}
{% endif %}

{%- if params.inline and (not params.classes or not "nhsuk-header--inline" in params.classes) %}
  {% set classNames = classNames ~ " nhsuk-header--inline" %}
{% endif %}

{%- if params.organisation %}
  {% set classNames = classNames ~ " nhsuk-header--organisation" %}
{% endif %}

{%- if params.classes %}
  {% set classNames = classNames ~ " " ~ params.classes %}
{% endif %}

{%- if params.navigation.colour and params.navigation.colour in ["white"] and (not params.navigation.classes or not "nhsuk-header__navigation--white" in params.navigation.classes) %}
  {% set classNamesNavigation = classNamesNavigation ~ " nhsuk-header__navigation--" ~ params.navigation.colour %}
{% endif %}

{%- if params.navigation.justified and (not params.navigation.classes or not "nhsuk-header__navigation--justified" in params.navigation.classes) %}
  {% set classNamesNavigation = classNamesNavigation ~ " nhsuk-header__navigation--justified" %}
{% endif %}

{%- if params.navigation.classes %}
  {% set classNamesNavigation = classNamesNavigation ~ " " ~ params.navigation.classes %}
{% endif %}

{%- set searchAction = params.search.action | default("https://www.nhs.uk/search/") %}
{%- set searchMethod = params.search.method | default("get") %}
{%- set searchName = params.search.name | default("q") %}
{%- set searchInputPlaceholder = params.search.input.placeholder | default(params.search.placeholder) | default("Search") %}
{%- set searchButtonAriaLabel = params.search.button.ariaLabel | default(params.search.visuallyHiddenButton) | default("Search") %}
{%- set searchLabelVisuallyHiddenText = params.search.label.visuallyHiddenText | default(params.search.visuallyHiddenLabel) | default("Search the NHS website") %}

{#- The NHS logo and service name are combined into a single link if either
    the logo doesn’t have an `href` set but the service name does, or if both
    have an exact `href`. This avoids having 2 links to same destination. -#}
{%- set combineLogoAndServiceNameLinks = params.service.text | length and (params.service.href and not params.logo.href) or (params.service.href and (params.service.href == params.logo.href)) %}

{%- set logoAlt = params.logo.alt | default("NHS") %}
{%- set logoHref = params.service.href if combineLogoAndServiceNameLinks else params.logo.href %}

{#- The NHS logo can be replaced by a bitmap image and/or suffixed by an
    organisation name (with can be split and include a descriptor) -#}
{%- macro _serviceLogo(logo, organisation) %}
{% if logo.src %}
<img class="nhsuk-header__organisation-logo" src="{{ logo.src }}" width="280" alt="{{ logo.alt | default("NHS") }}">
{% else %}
<svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="{{ logo.alt | default("NHS") }}">
  <title>{{ logo.alt | default("NHS") }}</title>
  <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"/>
</svg>
{% endif -%}
{% if organisation -%}
<span class="nhsuk-header__organisation-name">{{ organisation.name }}{% if organisation.split %} <span class="nhsuk-header__organisation-name-split">{{ organisation.split }}</span>{% endif %}</span>
{%- if organisation.descriptor %}<span class="nhsuk-header__organisation-name-descriptor">{{ organisation.descriptor }}</span>{% endif -%}
{%- endif -%}
{% endmacro %}

{%- macro _serviceName(text, href) %}
{% if text and href -%}
<a class="nhsuk-header__service-name" href="{{ href }}">
  {{- text | trim -}}
</a>
{% elif text -%}
<span class="nhsuk-header__service-name">
  {{- text | trim -}}
</span>
{%- endif -%}
{% endmacro %}

{%- macro _accountItem(item) %}
{{- nhsukIcon("user") if item.icon -}}
{% if item.html %}
  {{- item.html | safe | trim -}}
{% elif item.text %}
  {{- item.text | trim -}}
{% endif -%}
{% endmacro -%}

<header
  {{- nhsukAttributes({
    class: classNames,
    id: {
      value: params.id,
      optional: true
    },
    "data-module": "nhsuk-header",
    role: "banner"
  }) -}}

  {{- nhsukAttributes(params.attributes) -}}>
  <div class="nhsuk-header__container nhsuk-width-container {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
    <div class="nhsuk-header__service">
    {% if logoHref %}
      {% set logoAriaLabel = params.logo.ariaLabel if params.logo.ariaLabel else [
        logoAlt,
        params.organisation.name,
        params.organisation.split,
        params.service.text if combineLogoAndServiceNameLinks else undefined,
        "homepage"
      ] | select("string") | join(" ") %}
      <a class="nhsuk-header__service-logo" href="{{ logoHref }}" aria-label="{{ logoAriaLabel }}">
      {% if combineLogoAndServiceNameLinks %}
        {{ _serviceLogo(params.logo, params.organisation) | trim | indent(8) }}
        {{ _serviceName(params.service.text) }}
      {% else %}
        {{ _serviceLogo(params.logo, params.organisation) | trim | indent(8) }}
      {% endif %}
      </a>
    {% elif combineLogoAndServiceNameLinks %}
      {{ _serviceLogo(params.logo, params.organisation) | trim | indent(6) }}
      {{ _serviceName(params.service.text) }}
    {% else %}
      {{ _serviceLogo(params.logo, params.organisation) | trim | indent(6) }}
    {% endif %}
    {% if params.service.text and not combineLogoAndServiceNameLinks %}
      {{ _serviceName(params.service.text, params.service.href) }}
    {% endif %}
    </div>
{% if params.search %}
    <search class="nhsuk-header__search
      {%- if params.search.classes %} {{ params.search.classes }}{% endif %}"
      {{- nhsukAttributes(params.search.attributes) }}>
      <form
        {{- nhsukAttributes({
          class: "nhsuk-header__search-form",
          id: "search",
          action: {
            value: searchAction,
            optional: true
          },
          method: {
            value: searchMethod,
            optional: true
          }
        }) }} novalidate>
        {{ nhsukInput({
          label: {
            text: searchLabelVisuallyHiddenText,
            classes: "nhsuk-u-visually-hidden"
          },
          id: "search-field",
          name: searchName,
          type: "search",
          autocomplete: "off",
          placeholder: searchInputPlaceholder,
          formGroup: {
            afterInput: {
              html: nhsukButton({
                ariaLabel: searchButtonAriaLabel,
                icon: "search",
                small: true
              })
            }
          }
        }) | trim | indent(8) }}
      </form>
    </search>
{% endif %}
{% if params.account %}
    <nav class="nhsuk-header__account
      {%- if params.account.classes %} {{ params.account.classes }}{% endif %}" aria-label="{{ params.account.ariaLabel | default("Account") }}"
      {{- nhsukAttributes(params.account.attributes) }}>
      <ul class="nhsuk-header__account-list">
      {% for item in params.account.items %}
        {% if item %}
        <li class="nhsuk-header__account-item {%- if item.classes %} {{ item.classes }}{% endif %}">
        {% if item.href %}
          <a class="nhsuk-header__account-link" href="{{ item.href }}">
            {{ _accountItem(item) | indent(12) }}
          </a>
        {% elif item.action %}
          <form
            {{- nhsukAttributes({
              class: "nhsuk-header__account-form",
              action: item.action,
              method: item.method | default("post")
            }) }} novalidate>
            <button class="nhsuk-header__account-button">
              {{ _accountItem(item) | indent(14) }}
            </button>
          </form>
        {% else %}
          {{ _accountItem(item) | indent(10) }}
        {% endif %}
        </li>
        {% endif %}
      {% endfor %}
      </ul>
    </nav>
{% endif %}
  </div>
{% if params.navigation and params.navigation.items | length %}
  <nav class="{{ classNamesNavigation }}" aria-label="{{ params.navigation.ariaLabel | default("Menu") }}"
    {{- nhsukAttributes(params.navigation.attributes) }}>
    <div class="nhsuk-header__navigation-container nhsuk-width-container {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
      <ul class="nhsuk-header__navigation-list">
      {% for item in params.navigation.items %}
        {% if item %}
        {% set itemInnerAttributesHtml %}
          {{- nhsukAttributes({
            class: "nhsuk-header__navigation-link" if item.href
              else "nhsuk-header__navigation-text",
            href: {
              value: item.href,
              optional: true
            },
            "aria-current": {
              value: ("page" if item.current else "true")
                if item.active or item.current
                else false,
              optional: true
            }
          }) -}}
        {% endset %}
        {% set itemInnerContent %}
          {#- Wrap active links in strong element so users who override colours
              or styles still have some indicator of the current nav item. -#}
          {%- if item.active or item.current -%}
            <strong class="nhsuk-header__navigation-item-current-fallback">
              {{- item.html | safe if item.html else item.text -}}
            </strong>
          {%- else -%}
            {{- item.html | safe if item.html else item.text -}}
          {%- endif -%}
        {% endset %}
        <li class="nhsuk-header__navigation-item {%- if item.active or item.current %} nhsuk-header__navigation-item--current{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
        {% if item.href %}
          <a {{- itemInnerAttributesHtml | safe }}>
            {{- itemInnerContent | safe -}}
          </a>
        {% else %}
          <span {{- itemInnerAttributesHtml | safe }}>
            {{- itemInnerContent | safe -}}
          </span>
        {% endif %}
        </li>
        {% endif %}
      {% endfor %}
        <li class="nhsuk-header__menu" hidden>
          <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
            <span class="nhsuk-u-visually-hidden">{{ params.navigation.toggleMenuVisuallyHiddenText | default("Browse") }} </span>{{ params.navigation.toggleMenuText | default("More") }}
          </button>
        </li>
      </ul>
    </div>
  </nav>
{% endif %}
</header>