{#
  Variables:
    selectedCategory — ExpenseCategory|null (current value)
#}
{% set cats = [
    { value: 'food',      label: 'Repas',     icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.871c1.355 0 2.697.056 4.024.166C17.155 8.51 18 9.473 18 10.608v2.513M15 8.25v-1.5m-6 1.5v-1.5m12 9.75-1.5.75a3.354 3.354 0 0 1-3 0 3.354 3.354 0 0 0-3 0 3.354 3.354 0 0 1-3 0 3.354 3.354 0 0 0-3 0 3.354 3.354 0 0 1-3 0L3 16.5m15-3.379a48.474 48.474 0 0 0-6-.371c-2.032 0-4.034.126-6 .371m12 0c.39.049.777.102 1.163.16 1.07.16 1.837 1.094 1.837 2.175v5.169c0 .621-.504 1.125-1.125 1.125H4.125A1.125 1.125 0 0 1 3 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A47.78 47.78 0 0 1 6 13.12M12.265 3.11a.375.375 0 1 1-.53 0L12 2.845l.265.265Zm-3 0a.375.375 0 1 1-.53 0L9 2.845l.265.265Zm6 0a.375.375 0 1 1-.53 0L15 2.845l.265.265Z"/>' },
    { value: 'transport', label: 'Transport',  icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/>' },
    { value: 'housing',   label: 'Logement',   icon: '<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>' },
    { value: 'leisure',   label: 'Loisirs',    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456Z"/>' },
    { value: 'health',    label: 'Santé',      icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>' },
    { value: 'other',     label: 'Autre',      icon: '<circle cx="5" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="19" cy="12" r="1.5" fill="currentColor"/>' },
] %}

<div class="p-4">
    <p class="text-xs font-semibold text-stone-500 mb-3">Catégorie</p>
    <div class="grid grid-cols-3 gap-2">

        {# "None" chip #}
        <label class="relative cursor-pointer">
            <input type="radio" name="category" value=""
                   class="sr-only peer"
                   {{ selectedCategory is null or selectedCategory == '' ? 'checked' : '' }}>
            <div class="flex flex-col items-center gap-1.5 py-3 rounded-xl border-2 transition-all
                        border-stone-200 dark:border-stone-700 text-stone-400 dark:text-stone-500
                        peer-checked:border-violet-500 peer-checked:bg-violet-50 peer-checked:text-violet-600
                        dark:peer-checked:border-violet-400 dark:peer-checked:bg-violet-950/40 dark:peer-checked:text-violet-300
                        active:scale-95">
                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636"/>
                </svg>
                <span class="text-[10px] font-semibold leading-none">Aucune</span>
            </div>
        </label>

        {% for cat in cats %}
        <label class="relative cursor-pointer">
            <input type="radio" name="category" value="{{ cat.value }}"
                   class="sr-only peer"
                   {{ selectedCategory is not null and selectedCategory.value == cat.value ? 'checked' : '' }}>
            <div class="flex flex-col items-center gap-1.5 py-3 rounded-xl border-2 transition-all
                        border-stone-200 dark:border-stone-700 text-stone-400 dark:text-stone-500
                        peer-checked:border-violet-500 peer-checked:bg-violet-50 peer-checked:text-violet-600
                        dark:peer-checked:border-violet-400 dark:peer-checked:bg-violet-950/40 dark:peer-checked:text-violet-300
                        active:scale-95">
                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
                    {{ cat.icon|raw }}
                </svg>
                <span class="text-[10px] font-semibold leading-none">{{ cat.label }}</span>
            </div>
        </label>
        {% endfor %}

    </div>
</div>