{% from "nhsuk/components/button/macro.njk" import button as nhsukButton %}
{% from "nhsuk/components/input/macro.njk" import input as nhsukInput %}
{% from "nhsuk/components/link/macro.njk" import link as nhsukLink %}
{% from "nhsuk/macros/attributes.njk" import nhsukAttributes %}
{% from "nhsuk/macros/content.njk" import nhsukContent %}
{% 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 logoHref = params.service.href if combineLogoAndServiceNameLinks else params.logo.href %}
{%- set logoAriaLabel = params.logo.ariaLabel | default([
  params.logo.alt | default("NHS"),
  params.organisation.name,
  params.organisation.split,
  params.organisation.descriptor,
  params.service.text if combineLogoAndServiceNameLinks else undefined,
  "homepage"
] | select("string") | join(" ")) %}

{#- 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 %}
  {{- nhsukLink({
    href: href,
    text: text | trim,
    className: "nhsuk-header__service-name"
  }) | trim -}}
{% elif text -%}
  <span class="nhsuk-header__service-name">
    {{- text | trim -}}
  </span>
{%- endif %}
{%- endmacro %}

{%- macro _accountItem(item) %}
  {{- nhsukContent({
    text: item.text,
    html: item.html,
    slots: {
      start: nhsukIcon("user") if item.icon
    }
  }) | trim -}}
{% endmacro -%}

{%- set serviceLogoHtml %}
  {{- _serviceLogo(params.logo, params.organisation) | trim -}}
{% endset -%}

{%- set serviceNameHtml %}
  {{- _serviceName(params.service.text, params.service.href
    if not combineLogoAndServiceNameLinks) | trim -}}
{%- endset -%}

{%- set serviceHtml %}
  {{- serviceLogoHtml | safe }}
{% if combineLogoAndServiceNameLinks %}
  {{- serviceNameHtml | safe }}
{% endif %}
{% endset -%}

<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 %}
      {{ nhsukLink({
        href: logoHref,
        html: "\n" | safe ~ serviceHtml | trim | indent(2, true) ~ "\n" | safe,
        ariaLabel: logoAriaLabel,
        className: "nhsuk-header__service-logo"
      }) | trim | indent(6) }}
    {% else %}
      {{ serviceHtml | safe | trim | indent(6) }}
    {% endif %}
    {% if serviceNameHtml | length and not combineLogoAndServiceNameLinks %}
      {{ serviceNameHtml | safe | trim | indent(6) }}
    {% 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 %}
          {{ nhsukLink({
            html: "\n" | safe ~ _accountItem(item) | indent(2, true) ~ "\n" | safe,
            href: item.href,
            openInNewTab: item.openInNewTab,
            className: "nhsuk-header__account-link"
          }) | trim | indent(10) }}
        {% 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" type="submit">
              {{ _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({
            "aria-current": {
              value: ("page" if item.current else "true")
                if item.active or item.current
                else false,
              optional: true
            }
          }) -}}
        {% endset %}
        {%- set itemInnerHtml %}
          {#- 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">
              {{- nhsukContent(item) | trim -}}
            </strong>
          {%- else %}
            {{- nhsukContent(item) | trim -}}
          {% 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 %}
          {{ nhsukLink({
            html: itemInnerHtml,
            href: item.href,
            openInNewTab: item.openInNewTab,
            className: "nhsuk-header__navigation-link",
            attributes: itemInnerAttributesHtml
          }) | trim | indent(10) }}
        {% else %}
          <span class="nhsuk-header__navigation-text" {{- itemInnerAttributesHtml | safe }}>
            {{- itemInnerHtml | 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" type="button" aria-expanded="false">
            {{ nhsukContent({
              text: params.navigation.toggleMenuText | default("More"),
              visuallyHidden: {
                text: params.navigation.toggleMenuVisuallyHiddenText | default("Browse"),
                placement: "start",
                slots: { end: " " }
              }
            }) | trim | indent(12) }}
          </button>
        </li>
      </ul>
    </div>
  </nav>
{% endif %}
</header>