
{% if not localgov_base_remove_css %}
  {{ attach_library('localgov_base/service-statuses') }}
{% endif %}

{% if items %}
  {% set status_icon = 'info-icon' %}
  {% set see_all_icon = 'chevron-right' %}
  <div class="service-statuses">

    <div class="service-statuses__header">
      <div class="service-statuses__title">
        {% include "@localgov_base/includes/icons/icon.html.twig" with {
            icon_name: status_icon,
          }
        %}
        <h2 class="service-statuses__label">{{ 'Service updates'|t }}</h2>
      </div>
      <a href="{{ see_all_link }}" aria-label="{{ 'See all updates for this service'|t }}" class="service-statuses__link service-statuses__link--top">
        {% include "@localgov_base/includes/icons/icon.html.twig" with {
            icon_name: see_all_icon,
            icon_wrapper_element: 'span',
          }
        %}
        {{ 'See all'|t }}</a>
    </div>

    <ul class="service-statuses-list">
      {% for item in items %}
        <li class="service-statuses-list__item">
          <article class="service-status">
            <time datetime="{{ item.date|date("Y-m-d") }}" class="service-status__date">{{ item.date|date("d.m.Y") }}</time>
            <h3 class="service-status__title">{{ item.title }}</h3>
            <p class="service-status__summary">{{ item.description }}</p>
            <a class="service-status__read-more" aria-label="{{ 'Read more about status:'|t }} {{ item.title }}" href="{{ item.url }}">{{ 'Read more'|t }}</a>
          </article>
        </li>
      {% endfor %}
    </ul>

    <a href="{{ see_all_link }}" aria-label="{{ 'See all updates for this service'|t }}" class="service-statuses__link service-statuses__link--bottom">
      {% include "@localgov_base/includes/icons/icon.html.twig" with {
          icon_name: see_all_icon,
          icon_wrapper_element: 'span',
        }
      %}
      {{ 'See all'|t }}
    </a>

  </div>
{% endif %}
