<ul class="pagination d-none d-md-flex">
    {% set current_page = pagination.current %}
    {% set total_pages = pagination.pages|length %}
    {% set max_visible = 6 %}
    {% set half_visible = (max_visible / 2)|round(0, 'floor') %}

    {# Calcular el rango de páginas a mostrar #}
    {% set start_page = max(1, current_page - half_visible) %}
    {% set end_page = min(total_pages, start_page + max_visible - 1) %}

    {# Ajustar el inicio si estamos cerca del final #}
    {% if end_page - start_page < max_visible - 1 %}
        {% set start_page = max(1, end_page - max_visible + 1) %}
    {% endif %}

    {% for page in pagination.pages %}
        {% set page_number = loop.index %}
        
        {# Mostrar siempre la primera página #}
        {% if page_number == 1 %}
            {% 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 }} bg-danger-subtle">{{ page.title }}</span>
                </li>
            {% endif %}
            
            {# Añadir puntos suspensivos si es necesario #}
            {% if start_page > 2 %}
                <li class="mx-2 btn-pagination-position">
                    <span class="pagination-dots">...</span>
                </li>
            {% endif %}
        
        {# Mostrar páginas en el rango #}
        {% elseif page_number >= start_page and page_number <= end_page and page_number != 1 and page_number != total_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 }} {% if page.title > 0 %}bg-danger-subtle{% endif %}">{{ page.title }}</span>
                </li>
            {% endif %}
        
        {# Mostrar siempre la última página #}
        {% elseif page_number == total_pages %}
            {# Añadir puntos suspensivos si es necesario #}
            {% if end_page < total_pages - 1 %}
                <li class="mx-2 btn-pagination-position">
                    <span class="pagination-dots">...</span>
                </li>
            {% endif %}
            
            {% 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 }} bg-danger-subtle">{{ page.title }}</span>
                </li>
            {% endif %}
        {% endif %}
    {% endfor %}
</ul>