pagination.html

{%- comment -%}
NHS Pagination Component
Used for mini-hub page navigation

Parameters:
- previous: object with 'title' and 'url' (optional)
- next: object with 'title' and 'url' (optional)

Example usage:
{% include components/pagination.html previous=page.previous_page next=page.next_page %}
{%- endcomment -%}

<nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">
  <ul class="nhsuk-list nhsuk-pagination__list">
    {% if include.previous %}
    <li class="nhsuk-pagination-item--previous">
      <a class="nhsuk-pagination__link nhsuk-pagination__link--prev"
        href="{{ include.previous.url | prepend: site.baseurl }}">
        <span class="nhsuk-pagination__title">Previous</span>
        <span class="nhsuk-u-visually-hidden">:</span>
        <span class="nhsuk-pagination__page">{{ include.previous.title }}</span>
        <svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
          aria-hidden="true" width="34" height="34">
          <path
            d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.4.1-.5v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2 0-.4-.1-.5-.2-.2-.5-.2-.7 0l-2.7 3c0 .2 0 .4.1.5h-.1z">
          </path>
        </svg>
      </a>
    </li>
    {% endif %}
    {% if include.next %}
    <li class="nhsuk-pagination-item--next">
      <a class="nhsuk-pagination__link nhsuk-pagination__link--next"
        href="{{ include.next.url | prepend: site.baseurl }}">
        <span class="nhsuk-pagination__title">Next</span>
        <span class="nhsuk-u-visually-hidden">:</span>
        <span class="nhsuk-pagination__page">{{ include.next.title }}</span>
        <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
          aria-hidden="true" width="34" height="34">
          <path
            d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z">
          </path>
        </svg>
      </a>
    </li>
    {% endif %}
  </ul>
</nav>