{#
/**
 * @file
 * Election notices list page.
 *
 * Available variables:
 * - notices: Array of notices, each with:
 *   - id: Paragraph entity ID.
 *   - title: Notice title string.
 *   - date: Formatted date string (e.g. "17 March 2026").
 *   - date_attr: Machine date string for datetime attribute (e.g. "2026-03-17").
 *   - url: URL to the full notice detail page.
 */
#}
{% if notices %}
  <ol class="election-notices">
    {% for notice in notices %}
      <li class="election-notice">
        <a href="{{ notice.url }}" class="election-notice__link" aria-label="{{ 'Read notice: @title'|t({'@title': notice.title}) }}">
          <div class="election-notice__body">
            <h2 class="election-notice__title">{{ notice.title }}</h2>
            <div class="election-notice__footer">
              <time class="election-notice__date" datetime="{{ notice.date_attr }}">{{ notice.date }}</time>
              <svg class="election-notice__arrow" width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                <path d="M20.7129 8.6543L13.8223 15.5449C13.4531 15.9141 12.8379 15.9141 12.4277 15.5449C12.0586 15.1758 12.0586 14.5195 12.4277 14.1504L17.6367 8.94141H0.984375C0.451172 8.94141 0 8.49023 0 7.95703C0 7.42383 0.451172 6.97266 0.984375 6.97266H17.6367L12.4277 1.76367C12.0586 1.39453 12.0586 0.738281 12.4277 0.369141C12.7969 0 13.4531 0 13.8223 0.369141L20.7129 7.25977C21.082 7.62891 21.082 8.28516 20.7129 8.6543Z" fill="currentColor"/>
              </svg>
            </div>
          </div>
        </a>
      </li>
    {% endfor %}
  </ol>
{% else %}
  <p>{{ 'No notices have been published for this election.'|t }}</p>
{% endif %}
