{# templates/pagination/custom_pagination.html.twig #}
<div aria-label="Page navigation example" class="pagination-courses">
    <ul class="pagination justify-content-end gap-2" id="pagination-controls">
        
        {# Bouton "Précédent" #}
        {% if pagination.currentPageNumber > 1 %}
            <li class="page-item">
                <a class="page-link" href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': pagination.currentPageNumber - 1})) }}" aria-label="Previous">
                    <span aria-hidden="true">
                        <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="#041228">
                            <path d="M5.23915 1.53254C5.50436 1.24844 5.49732 0.805447 5.22322 0.529919C4.93501 0.240208 4.46408 0.246975 4.18432 0.544848L0.642986 4.3154C0.28154 4.70024 0.28154 5.29976 0.642986 5.6846L4.18432 9.45516C4.46409 9.75303 4.93501 9.7598 5.22321 9.47009C5.49731 9.19456 5.50435 8.75157 5.23914 8.46747L2.00226 5.00007L5.23915 1.53254Z"/>
                        </svg>
                    </span>
                </a>
            </li>
        {% else %}
            <li class="page-item disabled">
                <span class="page-link" aria-label="Previous">
                    <span aria-hidden="true">
                        <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="#041228">
                            <path d="M5.23915 1.53254C5.50436 1.24844 5.49732 0.805447 5.22322 0.529919C4.93501 0.240208 4.46408 0.246975 4.18432 0.544848L0.642986 4.3154C0.28154 4.70024 0.28154 5.29976 0.642986 5.6846L4.18432 9.45516C4.46409 9.75303 4.93501 9.7598 5.22321 9.47009C5.49731 9.19456 5.50435 8.75157 5.23914 8.46747L2.00226 5.00007L5.23915 1.53254Z"/>
                        </svg>
                    </span>
                </span>
            </li>
        {% endif %}

        {# Numéros de page #}
        {% for page in 1..pagination.pageCount %}
            {% if page == pagination.currentPageNumber %}
                <li class="page-item active"><span class="page-link">{{ page }}</span></li>
            {% else %}
                <li class="page-item">
                    <a class="page-link" href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': page})) }}" data-page="{{ page }}">
                        {{ page }}
                    </a>
                </li>
            {% endif %}
        {% endfor %}

        {# Bouton "Suivant" #}
        {% if pagination.currentPageNumber < pagination.pageCount %}
            <li class="page-item">
                <a class="page-link" href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': pagination.currentPageNumber + 1})) }}" aria-label="Next">
                    <span aria-hidden="true">
                        <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="#041228">
                            <path d="M0.76085 1.53254C0.495644 1.24844 0.502676 0.805447 0.776778 0.529919C1.06499 0.240208 1.53592 0.246975 1.81568 0.544848L5.35701 4.3154C5.71846 4.70024 5.71846 5.29976 5.35701 5.6846L1.81568 9.45516C1.53591 9.75303 1.06499 9.7598 0.776787 9.47009C0.502683 9.19456 0.495648 8.75157 0.760854 8.46747L3.99774 5.00007L0.76085 1.53254Z"/>
                        </svg>
                    </span>
                </a>
            </li>
        {% else %}
            <li class="page-item disabled">
                <span class="page-link" aria-label="Next">
                    <span aria-hidden="true">
                        <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="#041228">
                            <path d="M0.76085 1.53254C0.495644 1.24844 0.502676 0.805447 0.776778 0.529919C1.06499 0.240208 1.53592 0.246975 1.81568 0.544848L5.35701 4.3154C5.71846 4.70024 5.71846 5.29976 5.35701 5.6846L1.81568 9.45516C1.53591 9.75303 1.06499 9.7598 0.776787 9.47009C0.502683 9.19456 0.495648 8.75157 0.760854 8.46747L3.99774 5.00007L0.76085 1.53254Z"/>
                        </svg>
                    </span>
                </span>
            </li>
        {% endif %}

    </ul>
</div>