cnt-sindikatua/views/partials/pagination.twig

{% if posts.pagination.pages is not empty %}
    <nav class="pagination-block d-flex justify-content-center">
        <ul class="pagination">
            {# First #}
            {% if (posts.pagination.pages|first) and posts.pagination.pages|first.current != true %}
                <li class="first mx-2 border border-0">
                    <a href="{{ posts.pagination.pages|first.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Inicio</a>
                </li>
            {% else %}
                <li class="first disabled mx-2 border border-0" >
                    <button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Inicio</button>
                </li>
            {% endif %}

            {# Previous #}
            {% if posts.pagination.prev %}
                <li class="prev mx-2 border border-0">
                    <a href="{{ posts.pagination.prev.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Anterior</a>
                </li>
            {% else %}
                <li class="prev disabled mx-2 border border-0">
                    <button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Anterior</button>
                </li>
            {% endif %}

            {# Pages #}
            {% for page in posts.pagination.pages %}
                {% if page.link %}
                    <li class="mx-2 btn-pagination-position">
                        <a href="{{ page.link }}" class="{{ page.class }} text-decoration-none btn-page-hover" >{{ page.title }}</a>
                    </li>
                {% else %}
                    <li class="current mx-2 btn-pagination-position">
                        <span class="{{ page.class }}">{{ page.title }}</span>
                    </li>
                {% endif %}
            {% endfor %}

            {# Next #}
            {% if posts.pagination.next %}
                <li class="next mx-2 border border-0">
                    <a href="{{ posts.pagination.next.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Siguiente</a>
                </li>
            {% else %}
                <li class="next disabled mx-2 border border-0">
                    <button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Siguiente</button>
                </li>
            {% endif %}

            {# Last #}
            {% if (posts.pagination.pages|last) and posts.pagination.pages|last.current != true %}
                <li class="last mx-2 border border-0">
                <a href="{{ posts.pagination.pages|last.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Última</a></li>
            {% else %}
                <li class="last disabled mx-2 border border-0">
                    <button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Última</button>
                </li>
            {% endif %}
        </ul>
    </nav>
{% endif %}