{{-- La fenêtre « Gérer » des étiquettes, ouverte depuis les filtres : ajouter,
     renommer, réunir, supprimer sans quitter la photothèque
     (App\Services\Photos\GestionEtiquettes). `data-rester` : elle reste ouverte
     après chaque geste, seule la zone `etiquettes` est remplacée. Le champ
     de recherche est hors de la zone, pour que l'envoi ne l'efface pas
     (js/phototheque-etiquettes.js). --}}
<div class="modal fade" id="gestion-etiquettes" tabindex="-1" aria-labelledby="gestion-etiquettes-titre" aria-hidden="true" data-rester>
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title h5" id="gestion-etiquettes-titre">{{ __('Gérer les étiquettes') }}</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Fermer') }}"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('photos.etiquettes.creer') }}" class="d-flex gap-2 mb-2"
                    data-etiquette-ajout data-sans-modification data-no-draft>
                    @csrf
                    <label class="visually-hidden" for="gestion-etiquettes-nom">{{ __('Nouvelle étiquette') }}</label>
                    <input type="text" id="gestion-etiquettes-nom" name="nom" class="form-control form-control-sm" maxlength="60" required
                        autocomplete="off" placeholder="{{ __('Nouvelle étiquette') }}">
                    <button type="submit" class="btn btn-sm btn-primary">{{ __('Ajouter') }}</button>
                </form>

                <label class="visually-hidden" for="gestion-etiquettes-filtre">{{ __('Chercher une étiquette') }}</label>
                <input type="text" id="gestion-etiquettes-filtre" class="form-control form-control-sm mb-2" data-filtre-liste="#gestion-etiquettes-liste"
                    placeholder="{{ __('Chercher une étiquette') }}" autocomplete="off">

                <div data-zone="etiquettes">
                    <ul class="list-unstyled mb-0 phototheque-gestion" id="gestion-etiquettes-liste"
                        data-etiquettes-noms="{{ $listeEtiquettes->pluck('nom')->toJson(JSON_UNESCAPED_UNICODE) }}">
                        @forelse ($listeEtiquettes as $e)
                            @php $portees = \App\Services\Photos\Phototheque::compte($e->photos_count - $e->videos_count, $e->videos_count); @endphp
                            <li class="phototheque-gestion-ligne" data-filtre-ligne data-etiquette-ligne data-nom="{{ $e->nom }}">
                                <div class="d-flex align-items-center gap-2" data-etiquette-vue>
                                    <span class="me-auto text-truncate">{{ $e->nom }}</span>
                                    <span class="small text-nowrap">{{ $portees }}</span>
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-etiquette-modifier
                                        title="{{ __('Renommer') }}" aria-label="{{ __('Renommer « :nom »', ['nom' => $e->nom]) }}">
                                        <i class="bi bi-pencil" aria-hidden="true"></i>
                                    </button>
                                    <form method="POST" action="{{ route('photos.etiquettes.supprimer', $e) }}" data-sans-modification>
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger"
                                            onclick="return confirm(this.dataset.question)"
                                            data-question="{{ $e->photos_count
                                                ? __('Supprimer l\'étiquette « :nom » ? Elle sera retirée de :quoi, sans rien supprimer d\'autre.', ['nom' => $e->nom, 'quoi' => $portees])
                                                : __('Supprimer l\'étiquette « :nom » ?', ['nom' => $e->nom]) }}"
                                            title="{{ __('Supprimer') }}" aria-label="{{ __('Supprimer « :nom »', ['nom' => $e->nom]) }}">
                                            <i class="bi bi-trash" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </div>
                                <form method="POST" action="{{ route('photos.etiquettes.renommer', $e) }}" class="d-none gap-2" data-sans-modification
                                    data-etiquette-renommer
                                    data-question-fusion="{{ __('Réunir « :nom » (:quoi) dans « :vers » ? « :nom » disparaîtra.', ['nom' => $e->nom, 'quoi' => $portees]) }}">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="fusionner" value="0">
                                    <label class="visually-hidden" for="etiquette-nom-{{ $e->id }}">{{ __('Nouveau nom de « :nom »', ['nom' => $e->nom]) }}</label>
                                    <input type="text" id="etiquette-nom-{{ $e->id }}" name="nom" value="{{ $e->nom }}" class="form-control form-control-sm" maxlength="60" required autocomplete="off">
                                    <button type="submit" class="btn btn-sm btn-primary">{{ __('Enregistrer') }}</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" data-etiquette-annuler>{{ __('Annuler') }}</button>
                                </form>
                            </li>
                        @empty
                            <li>{{ __('Aucune étiquette.') }}</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>