{% from "nhsuk/macros/attributes.njk" import nhsukAttributes %}

{#- Set classes for this component #}
{%- set classNames = "nhsuk-hero" -%}
{%- set classNamesHeading = "nhsuk-hero__heading" -%}

{%- if params.image or params.imageURL %}
  {% set classNames = classNames ~ " nhsuk-hero--image" ~
    (" nhsuk-hero--image-description" if params.heading else "") %}
{% endif %}

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

{%- if params.headingSize and
  params.headingSize in ["xxs", "xs", "s", "m", "l", "xl"] and (
    not params.headingClasses or (
      not "nhsuk-heading-xxs" in params.headingClasses and
      not "nhsuk-heading-xs" in params.headingClasses and
      not "nhsuk-heading-s" in params.headingClasses and
      not "nhsuk-heading-m" in params.headingClasses and
      not "nhsuk-heading-l" in params.headingClasses and
      not "nhsuk-heading-xl" in params.headingClasses
    )
  )
%}
  {% set classNamesHeading = classNamesHeading ~ " nhsuk-heading-" ~ params.headingSize %}
{% endif %}

{%- if params.headingClasses %}
  {% set classNamesHeading = classNamesHeading ~ " " ~ params.headingClasses %}
{% endif %}

{%- set headingLevel = params.headingLevel if params.headingLevel else 1 %}
{%- set hasContent = true if caller or params.heading or params.text or params.html else false %}

{%- set image = {
  src: params.imageURL
} if params.imageURL else params.image %}

{#- Capture the HTML so we can optionally nest it in an image overlay -#}
{% set innerHtml %}
  <div class="nhsuk-width-container
    {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}
    {%- if not image.src %} nhsuk-hero--border{% endif %}">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">
        <div class="{{ "nhsuk-hero__wrapper" if not image.src else "nhsuk-hero-content" }}">
        {% if params.heading %}
          <h{{ headingLevel }} class="{{ classNamesHeading }}
            {%- if not (caller or params.text or params.html) %} nhsuk-u-margin-bottom-0{% endif %}">
            {{- params.heading -}}
          </h{{ headingLevel }}>
        {% endif %}
        {% if caller or params.html %}
          {{ caller() if caller else params.html | safe | trim | indent(10) }}
        {% elif params.text %}
          <p class="nhsuk-body-l nhsuk-u-margin-bottom-0">{{ params.text }}</p>
        {% endif %}
        {% if image.src %}
          <span class="nhsuk-hero__arrow" aria-hidden="true"></span>
        {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endset -%}

<section class="{{ classNames }}" {%- if params.id %} id="{{ params.id }}"{% endif %}
  {%- if image.src %} style="background-image: url('{{ image.src }}');"{% endif %}
  {{- nhsukAttributes(params.attributes) }}>
{% if image.src and not hasContent %}
  <div class="nhsuk-hero__overlay"></div>
{% elif image.src and hasContent %}
  <div class="nhsuk-hero__overlay">
    {{ innerHtml | safe | trim | indent(2) }}
  </div>
{% elif hasContent %}
  {{ innerHtml | safe | trim }}
{% endif %}
</section>