{% load i18n %}

{% comment %}
Both controls always render, the unavailable one disabled, so the pager keeps
the same shape on every part of a listing.
{% endcomment %}
<nav aria-label="{% trans "Article listing pages" %}">
    <ul class="pagination justify-content-center mt-5">
        <li class="page-item{% if not items.has_previous %} disabled{% endif %}">
            {% if items.has_previous %}
                <a class="page-link" href="?page={{ items.previous_page_number }}#{{ block_id }}">{% trans "Newer posts" %}</a>
            {% else %}
                <span class="page-link">{% trans "Newer posts" %}</span>
            {% endif %}
        </li>

        <li class="page-item{% if not items.has_next %} disabled{% endif %}">
            {% if items.has_next %}
                <a class="page-link" href="?page={{ items.next_page_number }}#{{ block_id }}">{% trans "Older posts" %}</a>
            {% else %}
                <span class="page-link">{% trans "Older posts" %}</span>
            {% endif %}
        </li>
    </ul>
</nav>