{# Picker de concessions pour usage inline (page scan, détail d'inventaire) : pas de POST,
   sélection lue par le contrôleur appelant via getControllerForElementAndIdentifier().selected().
   Params : concessions (map id => nom), selectedConcessions (liste pré-sélectionnée),
   pickerOpen (déplié au chargement, défaut true), pickerTitle (défaut « Concession(s) »),
   pickerSummary (texte affiché après le titre, ex. noms actuels), pickerActionLabel
   (libellé d'action affiché à droite quand le panneau est replié, ex. « Modifier ») #}
<details class="bg-white border border-gray-200 rounded-2xl shadow-sm group" data-controller="concession-picker-inline" {% if pickerOpen ?? true %}open{% endif %}>
    <summary class="px-4 py-3 cursor-pointer flex items-center justify-between gap-3 list-none">
        <div class="flex items-center gap-2 min-w-0 flex-1">
            <svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
            <span class="text-sm font-medium text-gray-700 shrink-0">{{ pickerTitle ?? 'Concession(s)' }}</span>
            {% if pickerSummary ?? false %}
                <span class="text-sm text-gray-600 truncate min-w-0">{{ pickerSummary }}</span>
            {% endif %}
            <span data-concession-picker-inline-target="badge" class="text-xs text-gray-500 shrink-0 hidden sm:inline">{{ selectedConcessions|length }} sélectionnée(s)</span>
        </div>
        <div class="flex items-center gap-2 shrink-0">
            {% if pickerActionLabel ?? false %}
                <span class="text-xs text-red-brand font-medium group-open:hidden">{{ pickerActionLabel }}</span>
            {% endif %}
            <svg class="w-4 h-4 text-gray-400 group-open:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
        </div>
    </summary>

    <div class="border-t border-gray-200 p-4 space-y-3">
        <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-inline-target="search" data-action="input->concession-picker-inline#filter"
                   placeholder="Rechercher…"
                   class="w-full pl-9 pr-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-brand text-sm">
        </div>

        <div class="flex items-center justify-between text-xs">
            <span data-concession-picker-inline-target="count" class="text-gray-500">{{ concessions|length }} concessions</span>
            <div class="flex items-center gap-2">
                <button type="button" data-action="concession-picker-inline#selectAll" class="text-gray-500 hover:text-gray-900">Tout</button>
                <span class="text-gray-300">·</span>
                <button type="button" data-action="concession-picker-inline#clearAll" class="text-gray-500 hover:text-gray-900">Aucun</button>
            </div>
        </div>

        <div class="h-48 overflow-y-auto rounded-lg border border-gray-200 bg-white divide-y divide-gray-100">
            {% for id, name in concessions %}
                <label data-concession-picker-inline-target="item" data-name="{{ name|lower }}"
                       class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 has-[:checked]:bg-blue-50">
                    <input type="checkbox" value="{{ id }}" {{ id in selectedConcessions ? 'checked' }}
                           data-action="change->concession-picker-inline#updateBadge"
                           data-concession-picker-inline-target="checkbox" class="peer sr-only">
                    <span class="w-4 h-4 rounded border-2 border-gray-300 flex items-center justify-center shrink-0 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">{{ name }}</span>
                </label>
            {% else %}
                <div class="flex items-center justify-center 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-inline-target="empty" class="hidden items-center justify-center text-gray-400 text-sm p-8 text-center">
                Aucune concession trouvée
            </div>
        </div>
    </div>
</details>
