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

{% macro _timelineItem(params, item) %}
  {% set headingLevel = params.headingLevel if params.headingLevel else 3 %}
  {% set headingBold = 'nhsuk-u-font-weight-bold' if item.active else '' %}
  {% set isPastItem = 'nhsapp-timeline__item--past' if item.isPastItem else '' %}
  
  <li class="nhsapp-timeline__item {{ isPastItem | trim }}">
    {% if item.active or item.isPastItem %}
      <svg class="nhsapp-timeline__badge" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
        <circle cx="14" cy="14" r="13" fill="#005EB8"/>
      </svg>
    {% else %}
      <svg class="nhsapp-timeline__badge nhsapp-timeline__badge--small" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
        <circle cx="7" cy="7" r="6" fill="white" stroke="#AEB7BD" stroke-width="2"/>
      </svg>
    {% endif %}
    <div class="nhsapp-timeline__content">
      <h{{ headingLevel }} class="nhsapp-timeline__header {{ headingBold }}">{{ item.headingText }}</h{{ headingLevel }}>
      {% if item.html %}
        {{ item.html | safe | trim }}
      {% elif item.text %}
        <p class="nhsapp-timeline__description">{{ item.text }}</p>
      {% endif %}
    </div>
  </li>
{% endmacro %}

<ol {%- if params.id %} id="{{ params.id }}"{% endif %} class="nhsapp-timeline {{ params.classes if params.classes }} {{- nhsukAttributes(params.attributes) }}">
  {% for item in params.items %}
    {% if item %}{{ _timelineItem(params, item) }}{% endif %}
  {% endfor %}
</ol>