{% load i18n %}

{% if is_paginated %}
<div class="mt-4 flex justify-center">
    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}"
               hx-get="?page={{ page_obj.previous_page_number }}"
               hx-target="#paginated-content"
               hx-swap="innerHTML"
               hx-push-url="true"
               class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                {% trans "Previous" %}
            </a>
        {% endif %}

        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
            {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}"
               hx-get="?page={{ page_obj.next_page_number }}"
               hx-target="#paginated-content"
               hx-swap="innerHTML"
               hx-push-url="true"
               class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                {% trans "Next" %}
            </a>
        {% endif %}
    </nav>
</div>
{% endif %}
