{% load i18n %}
<div class="px-6 py-4 flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-outline-variant bg-surface-low/50">
    <!-- Results summary info -->
    <div class="text-xs text-on-surface-variant font-medium">
        <span>
            {{ cl.result_count }} {% if cl.result_count == 1 %}{{ cl.opts.verbose_name }}{% else %}{{ cl.opts.verbose_name_plural }}{% endif %}
        </span>
        {% if show_all_url %}
            <a href="{{ show_all_url }}" class="ml-2 text-primary hover:underline font-bold">{% translate "Show all" %}</a>
        {% endif %}
    </div>

    <!-- Pager buttons -->
    {% if pagination_required %}
    <nav class="flex items-center gap-1.5" aria-label="{% translate 'Pagination' %}">
        {% for i in page_range %}
            {% if i == '.' %}
                <span class="px-2 py-1 text-xs text-on-surface-variant font-bold">...</span>
            {% elif i == cl.page_num %}
                <span class="px-3 py-1.5 bg-primary text-white text-xs font-extrabold rounded-lg shadow-sm">{{ i }}</span>
            {% else %}
                <a href="?p={{ i }}{% if cl.is_popup %}&_popup=1{% endif %}" 
                   class="px-3 py-1.5 bg-surface-lowest border border-outline-variant text-on-surface-variant hover:bg-surface-low transition-all text-xs font-bold rounded-lg shadow-sm">
                    {{ i }}
                </a>
            {% endif %}
        {% endfor %}
    </nav>
    {% endif %}
</div>