{% from "nhsuk/macros/attributes.njk" import nhsukAttributes %}
{% set stackedClass = 'nhsapp-cards--stacked' if params.stacked else '' %}
{% set headingLevel = params.headingLevel if params.headingLevel else 2 %}

{% from "./macro.njk" import nhsappCard %}

{%- if params.headingHtml -%}
    {{ params.headingHtml | safe }}
{% elif params.heading %}
  <h{{ headingLevel }} class="nhsapp-cards__heading {{ headingClass }}">
    {{ params.heading }}
  </h{{ headingLevel }}>
{% endif %}

{% if params.description %}
  <p class="nhsapp-cards__description {{ descriptionClass }}">
    {{ params.description }}
  </p>
{% elif params.descriptionHtml  %}
  {{ params.descriptionHtml | safe }}
{% endif %}

{# Control whether it renders as a list of <li> inside a <ul>, or plain blocks inside a <div>. Defaults to list (true). #}
{% set isList = params.isListItem if params.isListItem is defined else true %}
{% set wrapperTag = 'ul' if isList else 'div' %}

<{{ wrapperTag }} {%- if params.id %} id="{{ params.id }}"{% endif %} class="nhsapp-cards {{ stackedClass }} {{ params.classes if params.classes }}" {{- nhsukAttributes(params.attributes) }}>
  {% for cardItem in params.cards %}
    {{ nhsappCard({
      title: cardItem.title,
      titleHtml: cardItem.titleHtml,
      titleClasses: cardItem.titleClasses,
      headingLevel: cardItem.headingLevel,
      href: cardItem.href,
      html: cardItem.html,
      classes: cardItem.classes,
      containerClasses: cardItem.containerClasses,
      aboveContent: cardItem.aboveContent,
      description: cardItem.description,
      descriptionHtml: cardItem.descriptionHtml,
      descriptionClasses: cardItem.descriptionClasses,
      badgeLarge: cardItem.badgeLarge,
      img: cardItem.img,
      footer: cardItem.footer,
      isListItem: isList,
      linkAriaLabel: cardItem.linkAriaLabel
    }) }}
  {% endfor %}
</{{ wrapperTag }}>