{% load i18n %}
{% if page_obj.paginator.count > 0 %}
<div class="bg-slate-50 px-6 py-3 flex items-center justify-between border-t border-slate-200">
    <div class="flex items-center gap-4">
        <span class="text-xs text-slate font-medium">
            {% trans "Showing" %} <span class="font-bold text-navy">{{ page_obj.start_index }}</span>-<span class="font-bold text-navy">{{ page_obj.end_index }}</span> {% trans "of" %} <span class="font-bold text-navy">{{ page_obj.paginator.count }}</span>
        </span>
        <form method="get" class="flex items-center gap-2" id="pageSizeForm">
            {% for key, value in request.GET.items %}
                {% if key != 'page_size' and key != 'page' %}
                <input type="hidden" name="{{ key }}" value="{{ value }}">
                {% endif %}
            {% endfor %}
            <label class="text-xs text-slate">{% trans "Show" %}</label>
            <select name="page_size" onchange="document.getElementById('pageSizeForm').submit()"
                    class="px-2 py-1 bg-white border border-slate-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-navy">
                <option value="10" {% if page_obj.paginator.per_page == 10 %}selected{% endif %}>10</option>
                <option value="25" {% if page_obj.paginator.per_page == 25 %}selected{% endif %}>25</option>
                <option value="50" {% if page_obj.paginator.per_page == 50 %}selected{% endif %}>50</option>
                <option value="100" {% if page_obj.paginator.per_page == 100 %}selected{% endif %}>100</option>
            </select>
        </form>
    </div>
    <div class="flex gap-1">
        {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}"
           class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 transition">
            <i data-lucide="chevron-left" class="w-4 h-4 text-slate"></i>
        </a>
        {% else %}
        <span class="w-8 h-8 flex items-center justify-center rounded-lg border bg-slate-100 text-slate-300 cursor-not-allowed">
            <i data-lucide="chevron-left" class="w-4 h-4"></i>
        </span>
        {% endif %}

        {% for num in page_obj.paginator.page_range %}
            {% if num == page_obj.number %}
            <span class="w-8 h-8 flex items-center justify-center rounded-lg bg-navy text-white text-xs font-bold">{{ num }}</span>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
            <a href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}"
               class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 text-xs font-bold text-slate transition">{{ num }}</a>
            {% elif num == 1 or num == page_obj.paginator.num_pages %}
            <a href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}"
               class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 text-xs font-bold text-slate transition">{{ num }}</a>
            {% elif num == page_obj.number|add:'-3' or num == page_obj.number|add:'3' %}
            <span class="w-8 h-8 flex items-center justify-center text-xs text-slate">...</span>
            {% endif %}
        {% endfor %}

        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}"
           class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 transition">
            <i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i>
        </a>
        {% else %}
        <span class="w-8 h-8 flex items-center justify-center rounded-lg border bg-slate-100 text-slate-300 cursor-not-allowed">
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
        </span>
        {% endif %}
    </div>
</div>
{% endif %}