{% load i18n %}
{% load analytics_extras %}
<div class="flex flex-wrap items-center gap-3 mb-4">
    <a href="?" class="px-3 py-1.5 rounded-full text-xs font-semibold transition
        {% if not status_filter %}bg-navy text-white{% else %}bg-slate-100 text-slate-600 hover:bg-slate-200{% endif %}">
        {% trans "All" %}
    </a>
    {% for status_key, status_label in status_labels.items %}
    {% with count=list_stats|get_item:status_key %}
    <a href="?status={{ status_key }}" class="px-3 py-1.5 rounded-full text-xs font-semibold transition
        {% if status_filter == status_key %}bg-navy text-white{% else %}bg-slate-100 text-slate-600 hover:bg-slate-200{% endif %}">
        {{ status_label }} <span class="ml-1 opacity-75">{{ count|default:0 }}</span>
    </a>
    {% endwith %}
    {% endfor %}
</div>