{% load i18n %}{% spaceless %}
{% if paginator and paginator.num_pages > 1 %}
<style>
    .blog-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 2rem 0;
    }

    .blog-pagination-item {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
        color: #6c757d;
        background: white;
        border: 1px solid #dee2e6;
    }

    .blog-pagination-item:hover:not(.active):not(.disabled) {
        border-color: var(--lotus-extras-primary, #5DBEA3);
        color: var(--lotus-extras-primary, #5DBEA3);
        background: rgba(93, 190, 163, 0.05);
    }

    .blog-pagination-item.active {
        background: linear-gradient(135deg, var(--lotus-extras-primary, #5DBEA3) 0%, var(--lotus-extras-primary-dark, #30BE93) 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 2px 8px rgba(93, 190, 163, 0.3);
    }

    .blog-pagination-item.disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

    .blog-pagination-item svg {
        width: 16px;
        height: 16px;
    }

    .blog-pagination-ellipsis {
        color: #adb5bd;
        padding: 0 4px;
    }

    @media (max-width: 640px) {
        .blog-pagination {
            gap: 4px;
        }

        .blog-pagination-item {
            min-width: 36px;
            height: 36px;
            font-size: 13px;
        }

        .blog-pagination-item.hide-mobile {
            display: none;
        }
    }
</style>

<nav class="blog-pagination" aria-label="{% trans "Pagination" %}">
    {# Previous Button #}
    {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}" class="blog-pagination-item" aria-label="{% trans 'Previous page' %}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M15 18l-6-6 6-6"/>
            </svg>
        </a>
    {% else %}
        <span class="blog-pagination-item disabled" aria-disabled="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M15 18l-6-6 6-6"/>
            </svg>
        </span>
    {% endif %}

    {# Page Numbers #}
    {% for page_num in paginator.page_range %}
        {% if page_num == page_obj.number %}
            <span class="blog-pagination-item active" aria-current="page">{{ page_num }}</span>
        {% elif page_num == 1 or page_num == paginator.num_pages %}
            <a href="?page={{ page_num }}" class="blog-pagination-item">{{ page_num }}</a>
        {% elif page_num >= page_obj.number|add:"-1" and page_num <= page_obj.number|add:"1" %}
            <a href="?page={{ page_num }}" class="blog-pagination-item">{{ page_num }}</a>
        {% elif page_num == page_obj.number|add:"-2" or page_num == page_obj.number|add:"2" %}
            <span class="blog-pagination-ellipsis">…</span>
        {% endif %}
    {% endfor %}

    {# Next Button #}
    {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}" class="blog-pagination-item" aria-label="{% trans 'Next page' %}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 18l6-6-6-6"/>
            </svg>
        </a>
    {% else %}
        <span class="blog-pagination-item disabled" aria-disabled="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 18l6-6-6-6"/>
            </svg>
        </span>
    {% endif %}
</nav>
{% endif %}
{% endspaceless %}