{# Params attendus : concessions (liste), selectedConcessions (liste), redirect (url) #}
<div data-controller="concession-picker"
     data-concession-picker-redirect-value="{{ redirect|default(path('app_home')) }}"
     data-concession-picker-total-value="{{ concessions|length }}"
     class="space-y-4">

    <div class="relative">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 105 11a6 6 0 0012 0z" />
        </svg>
        <input type="text" data-concession-picker-target="search" data-action="input->concession-picker#filter"
               placeholder="Rechercher une concession…"
               class="w-full pl-9 pr-4 py-2.5 bg-white border border-gray-300 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-brand focus:border-transparent transition-all text-sm">
    </div>

    <div class="flex items-center justify-between">
        <span class="text-xs text-gray-500">
            <span data-concession-picker-target="count">{{ concessions|length }} concessions</span>
            <span data-concession-picker-target="selectedInfo" class="ml-2 text-red-brand font-medium {{ selectedConcessions|length > 0 ? '' : 'hidden' }}">
                · <span data-concession-picker-target="selectedCount">{{ selectedConcessions|length }}</span> sélectionnée(s)
            </span>
        </span>
        <div class="flex items-center gap-2">
            <button type="button" data-action="concession-picker#selectAll" class="text-xs text-gray-500 hover:text-gray-900 transition-colors">Tout sélectionner</button>
            <span class="text-gray-300">·</span>
            <button type="button" data-action="concession-picker#clearAll" class="text-xs text-gray-500 hover:text-gray-900 transition-colors">Tout effacer</button>
        </div>
    </div>

    <div data-concession-picker-target="list" class="h-64 overflow-y-auto rounded-xl border border-gray-200 bg-white divide-y divide-gray-100">
        {% for id, name in concessions %}
            <label data-concession-picker-target="item" data-name="{{ name|lower }}"
                   class="flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors hover:bg-gray-50 has-[:checked]:bg-blue-50">
                <input type="checkbox" value="{{ id }}" {{ id in selectedConcessions ? 'checked' }}
                       data-action="change->concession-picker#updateCounts" class="peer sr-only">
                <span class="w-4 h-4 rounded border-2 border-gray-300 flex items-center justify-center shrink-0 transition-colors peer-checked:bg-red-brand peer-checked:border-red-brand">
                    <svg class="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                </span>
                <span class="text-sm text-gray-700 font-medium">{{ name }}</span>
            </label>
        {% else %}
            <div class="flex items-center justify-center h-full text-gray-400 text-sm p-8 text-center">
                Référentiel des concessions non importé. Demandez à un administrateur de l'importer dans Paramètres.
            </div>
        {% endfor %}
        <div data-concession-picker-target="empty" class="hidden items-center justify-center h-full text-gray-400 text-sm p-8 text-center">
            Aucune concession trouvée
        </div>
    </div>

    <p data-concession-picker-target="error" class="hidden text-red-600 text-sm"></p>

    <button type="button" data-concession-picker-target="confirm" data-action="concession-picker#confirm"
            class="w-full py-3 bg-red-brand text-white font-semibold rounded-xl hover:bg-red-brand-dark disabled:opacity-50 disabled:cursor-not-allowed transition-all active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-red-brand focus:ring-offset-2 focus:ring-offset-white text-sm">
        Confirmer
    </button>
</div>
