{% load i18n %}
<div class="apple-filter-group mb-8" data-filter-title="{{ title }}">
    <div class="flex items-center justify-between mb-4 px-1">
        <h3 class="text-[11px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">
            {{ title }}
        </h3>
        {% if choices|length > 5 %}
            <span class="text-[9px] font-bold px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-400">
                {{ choices|length }} {% translate "opzioni" %}
            </span>
        {% endif %}
    </div>

    <div class="flex flex-wrap gap-2">
        {% for choice in choices %}
            <a href="{{ choice.query_string|iriencode }}" 
               class="flex-1 min-w-[fit-content] text-center px-4 py-2.5 rounded-2xl text-[12px] font-bold transition-all duration-300 border 
                      {% if choice.selected %}
                        bg-blue-600 border-blue-600 !text-white shadow-lg shadow-blue-500/30 scale-[1.02] z-10
                      {% else %}
                        bg-white dark:bg-slate-800/40 border-slate-100 dark:border-slate-800 text-slate-600 dark:text-slate-400 hover:border-blue-400 dark:hover:border-blue-500/50 hover:bg-blue-50/50 dark:hover:bg-blue-500/5
                      {% endif %}"
               {% if choice.selected %}aria-current="true"{% endif %}>
                <div class="flex items-center justify-center gap-2">
                    {% if choice.selected %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                    {% endif %}
                    <span>{{ choice.display }}</span>
                </div>
            </a>
        {% endfor %}
    </div>
</div>