Pager

<nav class='{{ get_component_class( 'pager', display ) }}' role="navigation" aria-labelledby='{{ heading_id }}'>
    <h4 id="{{ heading_id }}" class="sr-only">{{ 'Pagination'|t }}</h4>
    <ul class="c-pager__items">
        {# Print first item if we are not on the first page. #}
        {% if items.first %}
            <li class="c-pager__items__item c-pager__items__item--first">
                <a href="{{ items.first.href }}" title="{{ 'Go to first page'|t }}"}>
                    <span class="sr-only">{{ 'First page'|t }}</span>
                    <span aria-hidden="true">{{ items.first.text|default( '«'|t ) }}</span>
                </a>
            </li>
        {% endif %}
        {# Print previous item if we are not on the first page. #}
        {% if items.previous %}
            <li class="c-pager__items__item c-pager__items__item--previous">
                <a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev">
                    <span class="sr-only">{{ 'Previous page'|t }}</span>
                    <span aria-hidden="true">{{ items.previous.text|default( '‹'|t ) }}</span>
                </a>
            </li>
        {% endif %}
        {# Add an ellipsis if there are further previous pages. #}
        {% if ellipses.previous %}
            <li class="c-pager__items__item c-pager__items__item--ellipsis" role="presentation">&hellip;</li>
        {% endif %}
        {# Now generate the actual pager piece. #}
        {% for key, item in items.pages %}
            {% if item.title == 'ellipsis' %}
                <li class="c-pager__items__item c-pager__items__item--ellipsis" role="presentation">&hellip;</li>
            {% else %}
                <li class="c-pager__items__item {% if current == key %} c-pager__items__item--current {% endif %}">
                {% if item.href %}
                    <a href="{{ item.href }}" title="{{ item.title }}">
                {% endif %}
                    <span class="sr-only">
                        {{ current == key ? 'Current page'|t : 'Page'|t }}
                    </span>
                    {{- key -}}
                {% if item.href %}
                    </a>
                {% endif %}
                </li>
            {% endif %}
        {% endfor %}
        {# Add an ellipsis if there are further next pages. #}
        {% if ellipses.next %}
            <li class="c-pager__items__item c-pager__items__item--ellipsis" role="presentation">&hellip;</li>
        {% endif %}
        {# Print next item if we are not on the last page. #}
        {% if items.next %}
            <li class="c-pager__items__item c-pager__items__item--next">
            <a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next">
                <span class="sr-only">{{ 'Next page'|t }}</span>
                <span aria-hidden="true">{{ items.next.text|default( '›'|t ) }}</span>
            </a>
            </li>
        {% endif %}
        {# Print last item if we are not on the last page. #}
        {% if items.last %}
            <li class="c-pager__items__item c-pager__items__item--last">
            <a href="{{ items.last.href }}" title="{{ 'Go to last page'|t }}">
                <span class="sr-only">{{ 'Last page'|t }}</span>
                <span aria-hidden="true">{{ items.last.text|default( '»'|t ) }}</span>
            </a>
            </li>
        {% endif %}
    </ul>
</nav>