{% if pagination.total_pages > 1 %}
<div class="flex items-center justify-between px-5 py-3 border-t border-slate-100 bg-slate-50/60">
    <span class="text-xs text-slate-400">
        {{ (pagination.page - 1) * pagination.page_size + 1 }}–{{ [pagination.page * pagination.page_size, pagination.total] | min }} of {{ pagination.total }}
    </span>
    <div class="flex items-center gap-1">
        {% if pagination.has_prev %}
        <a href="?page={{ pagination.page - 1 }}"
           class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-md border border-slate-200 text-slate-600 bg-white hover:bg-slate-50 transition-colors">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>
            </svg>
            Prev
        </a>
        {% else %}
        <span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-md border border-slate-100 text-slate-300 bg-white cursor-not-allowed">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>
            </svg>
            Prev
        </span>
        {% endif %}

        {# Page number pills — show at most 5 around the current page #}
        {% set start_p = [1, pagination.page - 2] | max %}
        {% set end_p = [pagination.total_pages, pagination.page + 2] | min %}
        {% if start_p > 1 %}
        <a href="?page=1" class="inline-flex items-center px-2.5 py-1 text-xs font-medium rounded-md border border-slate-200 text-slate-600 bg-white hover:bg-slate-50 transition-colors">1</a>
        {% if start_p > 2 %}<span class="text-xs text-slate-400 px-1">…</span>{% endif %}
        {% endif %}

        {% for p in range(start_p, end_p + 1) %}
        {% if p == pagination.page %}
        <span class="inline-flex items-center px-2.5 py-1 text-xs font-semibold rounded-md bg-violet-600 text-white border border-violet-600">{{ p }}</span>
        {% else %}
        <a href="?page={{ p }}" class="inline-flex items-center px-2.5 py-1 text-xs font-medium rounded-md border border-slate-200 text-slate-600 bg-white hover:bg-slate-50 transition-colors">{{ p }}</a>
        {% endif %}
        {% endfor %}

        {% if end_p < pagination.total_pages %}
        {% if end_p < pagination.total_pages - 1 %}<span class="text-xs text-slate-400 px-1">…</span>{% endif %}
        <a href="?page={{ pagination.total_pages }}" class="inline-flex items-center px-2.5 py-1 text-xs font-medium rounded-md border border-slate-200 text-slate-600 bg-white hover:bg-slate-50 transition-colors">{{ pagination.total_pages }}</a>
        {% endif %}

        {% if pagination.has_next %}
        <a href="?page={{ pagination.page + 1 }}"
           class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-md border border-slate-200 text-slate-600 bg-white hover:bg-slate-50 transition-colors">
            Next
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
            </svg>
        </a>
        {% else %}
        <span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-md border border-slate-100 text-slate-300 bg-white cursor-not-allowed">
            Next
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
            </svg>
        </span>
        {% endif %}
    </div>
</div>
{% endif %}