<div class="modal animate__animated animate__fadeInLeft" id="modalCreationCompte">
    <div onclick="closeForm('modalCreationCompte')" class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Création de compte utilisateur</p>
            <button type="button" onclick="closeForm('modalCreationCompte')" class="delete"
                aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            <div class="content">
                <form id="form_compte">
                    @csrf
                    <div class="field">
                        <label class="label title is-6" for="nom_user_id">Nom</label>
                        <p class="control">
                            <input id="nom_user_id"
                                class="input is-info is-rounded
                                @error('nom_user') is-invalid @enderror"
                                type="text" placeholder="Nom" name="nom_user" required />
                        </p>
                        @error('nom_user')
                            <div class="help is-danger error">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="field">
                        <label class="label title is-6" for="prenom_user_id">Prénom</label>
                        <p class="control">
                            <input id="prenom_user_id"
                                class="input is-info is-rounded
                                @error('prenom_user') is-invalid @enderror"
                                type="text" placeholder="Prénom" name="prenom_user" required />
                        </p>
                        @error('prenom_user')
                            <div class="help is-danger error">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="field">
                        <label class="label title is-6" for="nom_utilisateur_user_id">Nom d'utilisateur</label>
                        <p class="control">
                            <input id="nom_utilisateur_user_id"
                                class="input is-info is-rounded
                                @error('nom_utilisateur_user') is-invalid @enderror"
                                autocomplete="username" type="text" placeholder="Ex: mbodji" name="nom_utilisateur_user"
                                required />
                        </p>
                        <div id="error_user_name" class="error erreur"></div>
                        @error('nom_utilisateur_user')
                            <div class="help is-danger error">{{ $message }}</div>
                        @enderror
                    </div>
                    {{-- <div class="field">
                        <label class="label title is-6" for="mot_de_passe_user_id">Mot de passe</label>
                        <p class="control">
                            <input id="mot_de_passe_user_id"
                                class="input is-info is-rounded
                                @error('mot_de_passe_user') is-invalid @enderror"
                                autocomplete="new-password" type="password" placeholder="Au moins 8 caractères"
                                name="mot_de_passe_user" required />
                        </p>
                        @error('mot_de_passe_user')
                            <div class="help is-danger error">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input id="afficher_mot_de_passe" type="checkbox">
                                Afficher le mot de passe
                            </label>
                        </div>
                    </div>
                    <div class="field">
                        <label class="label title is-6" for="mot_de_passe_confirmation_user_id">Mot de passe</label>
                        <p class="control">
                            <input id="mot_de_passe_confirmation_user_id"
                                class="input is-info is-rounded
                                    @error('mot_de_passe_confirmation_user') is-invalid
                                @enderror"
                                autocomplete="new-password" type="password" placeholder="Confirmer le mot de passe"
                                name="mot_de_passe_confirmation_user" required />
                        </p>
                        @error('mot_de_passe_confirmation_user')
                            <div class="help is-danger error">{{ $message }}</div>
                        @enderror
                    </div> --}}
                    <div class="field">
                        <label class="label title is-6" for="role_user_id">Rôle</label>
                        <div class="select is-info is-rounded w-100">
                            <select id="role_user_id" name="role_user" required>
                                <option value="" disabled selected>Choisir le rôle</option>
                                <option value="administration">Administration</option>
                                <option value="surveillant">Surveillant</option>
                            </select>
                        </div>
                    </div>
                    <div class="field" id="div_is_admin" hidden>
                        <div class="control">
                            <label class="checkbox">
                                <input id="is_admin" type="checkbox" name="admin" value="0" />
                                Administrateur
                            </label>
                        </div>
                    </div>
                    <button id="btn_submit_formCreationCompte" hidden></button>
                    <button type="reset" class="btn_reset" hidden></button>
                </form>
            </div>
        </section>
        <footer class="modal-card-foot">
            <button type="button" onclick="closeForm('modalCreationCompte')"
                class="button is-light is-danger is-rounded">Annuler</button>
            <button onclick="$('#btn_submit_formCreationCompte').click()" class="button is-info is-rounded">Créer le
                compte</button>
        </footer>
    </div>
</div>
