{% load url_extras i18n %}
{% if page_obj.has_other_pages %}
    <nav aria-label="Page navigation" class="mt-6">
        <div class="flex items-center justify-center gap-2">

            {# Get the filter parameters (e.g., "q=searchterm&job=dev") #}
            {% add_get_params request.GET as filter_params %}

            {# --- First & Previous --- #}
            {% if page_obj.has_previous %}
                <a href="?page=1{% if filter_params %}&{{ filter_params }}{% endif %}" 
                   class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition"
                   aria-label="{% trans 'First page' %}">
                    <i data-lucide="chevrons-left" class="w-4 h-4"></i>
                </a>
                <a href="?page={{ page_obj.previous_page_number }}{% if filter_params %}&{{ filter_params }}{% endif %}"
                   class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition"
                   aria-label="{% trans 'Previous page' %}">
                    <i data-lucide="chevron-left" class="w-4 h-4"></i>
                </a>
            {% endif %}

            {# --- Page Numbers --- #}
            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <span class="inline-flex items-center justify-center w-10 h-10 bg-temple-red text-white font-semibold rounded-lg">
                        {{ num }}
                    </span>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <a href="?page={{ num }}{% if filter_params %}&{{ filter_params }}{% endif %}"
                       class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition">
                        {{ num }}
                    </a>
                {% elif num == 1 or num == page_obj.paginator.num_pages %}
                    {# Always show first and last page number #}
                    <a href="?page={{ num }}{% if filter_params %}&{{ filter_params }}{% endif %}"
                       class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition">
                        {{ num }}
                    </a>
                {% elif num == page_obj.number|add:'-3' or num == page_obj.number|add:'3' %}
                    {# Show ellipsis #}
                    <span class="inline-flex items-center justify-center w-10 h-10 text-gray-400">
                        ...
                    </span>
                {% endif %}
            {% endfor %}

            {# --- Next & Last --- #}
            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}{% if filter_params %}&{{ filter_params }}{% endif %}"
                   class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition"
                   aria-label="{% trans 'Next page' %}">
                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
                </a>
                <a href="?page={{ page_obj.paginator.num_pages }}{% if filter_params %}&{{ filter_params }}{% endif %}"
                   class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition"
                   aria-label="{% trans 'Last page' %}">
                    <i data-lucide="chevrons-right" class="w-4 h-4"></i>
                </a>
            {% endif %}

        </div>
        
        {# Page info #}
        <div class="text-center mt-3 text-sm text-gray-500">
            {% blocktrans %}Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}{% endblocktrans %}
        </div>
    </nav>
{% endif %}

<script>
    lucide.createIcons();
</script>