<nav class="pager" role="navigation" aria-labelledby="{{ pager_heading_id }}">
  <h4 id="{{ pager_heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>
  <ul class="pager__items js-pager__items">
    {# Print first item if we are not on the first page. #}
    {% if pager_first %}
      <li class="pager__item pager__item--first">
        <a href="{{ pager_first.href }}" title="{{ 'Go to first page'|t }}"{{ pager_first.attributes|without('href', 'title') }}>
          <span class="visually-hidden">{{ 'First page'|t }}</span>
          <span aria-hidden="true">{{ pager_first.text|default('« First'|t) }}</span>
        </a>
      </li>
    {% endif %}

    {# Print previous item if we are not on the first page. #}
    {% if pager_previous %}
      <li class="pager__item pager__item--previous">
        <a href="{{ pager_previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ pager_previous.attributes|without('href', 'title', 'rel') }}>
          <span class="visually-hidden">{{ 'Previous page'|t }}</span>
          <span aria-hidden="true">{{ pager_previous.text|default('‹ Previous'|t) }}</span>
        </a>
      </li>
    {% endif %}

    {# Add an ellipsis if there are further previous pages. #}
    {% if pager_ellipses_previous %}
      <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
    {% endif %}

    {# Now generate the actual pager piece. #}
    {% for key, item in pager_pages %}
      <li class="pager__item pager__item--page {{ current == key ? ' is-active' : '' }}">
        {% if current == key %}
          {% set title = 'Current page'|t %}
        {% else %}
          {% set title = 'Go to page @key'|t({'@key': key}) %}
        {% endif %}
        <a href="{{ item.href }}" title="{{ title }}"{{ item.attributes|without('href', 'title') }}>
          <span class="visually-hidden">
            {{ current == key ? 'Current page'|t : 'Page'|t }}
          </span>
          {{- key -}}
        </a>
      </li>
    {% endfor %}

    {% if pager_current %}
      <li class="pager__item pager__item--current-page">
        Page {{ pager_current }}
      </li>
    {% endif %}

    {# Add an ellipsis if there are further next pages. #}
    {% if pager_ellipses_next %}
      <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
    {% endif %}

    {# Print next item if we are not on the last page. #}
    {% if pager_next %}
      <li class="pager__item pager__item--next">
        <a href="{{ pager_next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ pager_next.attributes|without('href', 'title', 'rel') }}>
          <span class="visually-hidden">{{ 'Next page'|t }}</span>
          <span aria-hidden="true">{{ pager_next.text|default('Next ›'|t) }}</span>
        </a>
      </li>
    {% endif %}

    {# Print last item if we are not on the last page. #}
    {% if pager_last %}
      <li class="pager__item pager__item--last">
        <a href="{{ pager_last.href }}" title="{{ 'Go to last page'|t }}"{{ pager_last.attributes|without('href', 'title') }}>
          <span class="visually-hidden">{{ 'Last page'|t }}</span>
          <span aria-hidden="true">{{ pager_last.text|default('Last »'|t) }}</span>
        </a>
      </li>
    {% endif %}
  </ul>
</nav>
