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

{#- Set classes for this component #}
{%- set classNames = "nhsuk-error-summary" -%}

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

<div
  {{- nhsukAttributes({
    class: classNames,
    id: {
      value: params.id,
      optional: true
    },
    "data-module": "nhsuk-error-summary",
    "data-disable-auto-focus": {
      value: params.disableAutoFocus | string
        if params.disableAutoFocus in [true, false]
        else false,
      optional: true
    }
  }) -}}

  {{- nhsukAttributes(params.attributes) -}}>
  {#- Keep the role="alert" in a seperate child container to prevent a race condition between
  the focusing js at the alert, resulting in information getting missed in screen reader announcements #}
  <div role="alert">
    <h2 class="nhsuk-error-summary__title">
      {{ params.titleHtml | safe | trim | indent(6) if params.titleHtml else params.titleText }}
    </h2>
    <div class="nhsuk-error-summary__body">
    {% if caller or params.descriptionHtml or params.descriptionText %}
      <p>
        {{ caller() if caller else (params.descriptionHtml | safe | trim | indent(8) if params.descriptionHtml else params.descriptionText) }}
      </p>
    {% endif %}
    {% if params.errorList | length %}
      <ul class="nhsuk-list nhsuk-error-summary__list">
      {% for item in params.errorList %}
        {% if item %}
        <li>
        {% if item.href %}
          <a href="{{ item.href }}"
            {{- nhsukAttributes(item.attributes) }}>
            {{- item.html | safe | trim | indent(10) if item.html else item.text -}}
          </a>
        {% else %}
          {{ item.html | safe | trim | indent(10) if item.html else item.text }}
        {% endif %}
        </li>
        {% endif %}
      {% endfor %}
      </ul>
    {% endif %}
    </div>
  </div>
</div>