{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
{% from "govuk/macros/attributes.njk" import govukAttributes -%}

<div class="x-govuk-masthead{%- if params.inverse %} x-govuk-masthead--inverse{% endif -%}{%- if params.classes %} {{ params.classes }}{% endif -%}"
  {{- govukAttributes(params.attributes) }}>
  <div class="govuk-width-container">
    {{ govukPhaseBanner(params.phaseBanner) | indent(4) if params.phaseBanner }}
    {{ govukBreadcrumbs({
      classes: ("govuk-breadcrumbs--inverse" if params.inverse) + (" " + params.breadcrumbs.classes if params.breadcrumbs.classes),
      items: params.breadcrumbs.items,
      collapseOnMobile: params.breadcrumbs.collapseOnMobile,
      attributes: params.breadcrumbs.attributes
    }) | indent(4) if params.breadcrumbs }}
    {{- caller() if caller -}}
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds-from-desktop">
      {% if params.title %}
        <h1 class="x-govuk-masthead__title{%- if params.title.classes %} {{ params.title.classes }}{% endif %}">
          {{ params.title.html | safe if params.title.html else params.title.text }}
        </h1>
      {% endif %}
      {% if params.description %}
        <p class="x-govuk-masthead__description{%- if params.description.classes %} {{ params.description.classes }}{% endif %}">
          {{ params.description.html | safe if params.description.html else params.description.text }}
        </p>
      {% endif %}
      {% if params.startButton %}
        {{ govukButton({
          classes: ("govuk-button--inverse" if params.inverse) + (" " + params.startButton.classes if params.startButton.classes),
          text: params.startButton.text | default("Get started"),
          href: params.startButton.href,
          isStartButton: true,
          name: params.startButton.name,
          type: params.startButton.type,
          attributes: params.startButton.attributes
        }) | indent(8) }}
      {% endif %}
      </div>
      {% if params.image %}
      <div class="govuk-grid-column-one-third-from-desktop">
        <div class="x-govuk-masthead__image{%- if params.image.hideOnMobile %} x-govuk-masthead__image--hide-on-mobile{% endif %}">
          <img src="{{ params.image.src }}" alt="{{ params.image.alt }}"{% if not params.image.alt %} role="presentation"{% endif %}>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>