{{-- Une seule fenetre pour l'ajout et la modification, remplie par le bouton
     qui l'ouvre (js/modale-saisie.js). Une saisie refusee revient ici avec
     ses erreurs : `_edition` dit sur quelle permission on etait.

     Les deux gestes ne demandent pas la meme chose, d'ou les blocs
     `data-seulement` : on ajoute des permissions en les cochant parmi celles
     que les controleurs declarent et qui n'existent pas encore, on en
     modifie une en la renommant. Les roles, eux, servent aux deux.

     ⚠️ L'enregistrement retire la permission a tout role qui n'est pas
     coche : une case qui ne se pre-cocherait pas (`data-champ-liste`) la
     retirerait sans rien dire.

     Reserve au super administrateur, comme l'ecriture (voir l'index). --}}
@if ($peutEcrire)
    @php
        $enEdition = old('_edition');
        $rolesCoches = array_map('strval', (array) old('roles', []));
        $permissionsCochees = (array) old('permissions', []);
    @endphp
    <div class="modal fade" id="modale-permission" tabindex="-1" aria-hidden="true" data-modale-saisie
        @if ($errors->any()) data-rouvrir="1" @endif>
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <form method="post" class="modal-content"
                action="{{ $enEdition ? route('permissions.update', $enEdition) : route('permissions.store') }}"
                data-store="{{ route('permissions.store') }}"
                data-update="{{ route('permissions.update', '__ID__') }}"
                data-titre-ajouter="Ajouter des permissions" data-titre-modifier="Modifier la permission">
                @csrf
                <input type="hidden" name="_method" value="{{ $enEdition ? 'PUT' : 'POST' }}">
                <input type="hidden" name="_edition" value="{{ $enEdition }}">

                <div class="modal-header">
                    <h5 class="modal-title" data-titre>{{ $enEdition ? 'Modifier la permission' : 'Ajouter des permissions' }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>

                <div class="modal-body" data-zone="permission-saisie">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    {{-- A l'ajout : celles qui manquent. --}}
                    <div class="mb-4" data-seulement="ajout" @if ($enEdition) hidden @endif>
                        <label class="form-label d-block">Permissions disponibles (non encore créées)</label>
                        @if ($availablePermissions->isEmpty())
                            <p class="mb-0">Toutes les permissions possibles ont déjà été créées.</p>
                        @else
                            {{-- Meme grille que les vues roles : largeur naturelle du badge,
                                 une par ligne sous 576px, wrap propre au-dessus. --}}
                            <div class="row g-2 align-items-center perm-row">
                                @foreach ($availablePermissions as $disponible)
                                    <div class="col-12 col-sm-auto">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="permissions[]"
                                                value="{{ $disponible }}" id="permission-disponible-{{ $loop->index }}"
                                                @checked(in_array($disponible, $permissionsCochees, true)) @disabled((bool) $enEdition)>
                                            <label class="form-check-label" for="permission-disponible-{{ $loop->index }}">
                                                @permissionBadge($disponible)
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    {{-- A la modification : son nom. --}}
                    <div class="mb-4" data-seulement="modification" @unless ($enEdition) hidden @endunless>
                        <label class="form-label" for="permission-nom">Nom de la permission <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="name" id="permission-nom" data-champ="name"
                            value="{{ old('name') }}" maxlength="255" required @disabled(!$enEdition)>
                    </div>

                    <div>
                        <label class="form-label d-block">Rôles concernés</label>
                        <div class="row g-2 align-items-center perm-row">
                            @foreach ($roles as $role)
                                <div class="col-12 col-sm-auto">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="roles[]"
                                            value="{{ $role->id }}" id="permission-role-{{ $role->id }}" data-champ-liste="roles"
                                            @checked(in_array((string) $role->id, $rolesCoches, true))>
                                        <label class="form-check-label" for="permission-role-{{ $role->id }}">
                                            <span class="badge bg-secondary">{{ strtoupper($role->name) }}</span>
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </div>
            </form>
        </div>
    </div>
@endif