{{if eq .mode "submit"}}
<h1>Ajout Utilisateur</h1>
{{else if eq .mode "update" }}
<h1>Modification Utilisateur</h1>
{{ else }}
<h1>Mon Profil</h1>
{{end}}

<form method="post" oninput='repeatpassword.setCustomValidity(password.value != repeatpassword.value ? "Mot de passe non valide" : "")'>
    <button type="submit" href="{{.conf.AppRoutes.usersubmit}}" class="btn btn-success">Valider</button>
    
    {{if eq .mode "profil"}}
    <a href="{{.conf.AppRoutes.home}}" class="btn btn-secondary">Annuler</a>
    {{else}}
    <a href="{{.conf.AppRoutes.userlist}}" class="btn btn-secondary">Annuler</a>
    {{end}}
    
    {{if eq .mode "update"}}
    <a href="{{.conf.AppRoutes.userdelete}}{{.user.Id}}" class="btn btn-danger float-end" data-method="delete" data-confirm="Confirmez-vous la suppression de cet enregistrement ?">Supprimer</a>
    {{end}}

    {{ if .error }}
        <div class='alert alert-danger mt-3 mb-3'>
            <strong>Erreur</strong><br>
            {{ .error | unescaped }}
        </div>
    {{ end }}

    <center>
        <img class="avatar" id="avatarimage" src="{{.conf.AppWeburl}}/uploads/avatar/{{.user.Avatar}}">
        <input type="hidden" class="form-control" id="avatar" name="avatar" required value="{{.user.Avatar}}"><br>
        <bouton class="btn btn-info mt-1" style="width:90px" onClick="ModalLoad('mymodallarge','Avatar','{{.conf.AppRoutes.upload}}avatar/avatar');" title='Modifier votre Avatar'>Modifier</a>

    </center>

    <div class="row">
        <div class="col-md-6">
            <div class="card mt-3">
                <div class="card-header">
                    Identifiants
                </div>

                <div class="card-body">
                    <div class="mb-3">
                        <label for="login" class="form-label form-required">Login</label>
                        <input type="string" class="form-control" id="login" name="login" {{if eq .mode "submit"}}required{{else}}readonly{{end}} value="{{.user.Login}}">
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label form-required">Mot de Passe</label>
                        <input type="password" class="form-control" id="password" name="password" {{if eq .mode "submit"}}required{{end}}>
                    </div>          

                    <div class="mb-3">
                        <label for="repeatpassword" class="form-label form-required">Confirmer Mot de Passe</label>
                        <input type="password" class="form-control" id="repeatpassword"  name="repeatpassword" {{if eq .mode "submit"}}required{{end}}>
                    </div>   

                    <div class="mb-3">
                        <label for="string" class="form-label form-required">Api Key</label>
                        <input type="string" class="form-control" id="apikey" name="apikey" required value="{{.user.Apikey}}">
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card mt-3">
                <div class="card-header">
                    Informations
                </div>

                <div class="card-body">
                    {{ if ne .mode "profil" }}
                    <div class="mb-3">
                        <label for="role" class="form-label form-required">Rôle</label>
                        <select id="role" name="role" class="form-control">
                            <option value=""></option>
                            <option value="10">Administrateur</option>
                            <option value="50">Utilisateur</option>
                        </select>  
                    </div> 
                    {{ end }}

                    <div class="mb-3">
                        <label for="firstname" class="form-label form-required">Prénom</label>
                        <input type="string" class="form-control" id="firstname" name="firstname" required value="{{.user.Firstname}}">
                    </div>

                    <div class="mb-3">
                        <label for="lastname" class="form-label form-required">Nom</label>
                        <input type="string" class="form-control" id="lastname" name="lastname" required value="{{.user.Lastname}}">
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label form-required">Email</label>
                        <input type="email" class="form-control" id="email" name="email" required value="{{.user.Email}}">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    $('#role option[value="{{.user.Role}}"]').prop('selected', true);
    function CallbackUpload(id,path,filename) {
        $("#"+id).val(filename);
        $("#"+id+"image").attr("src",path+filename);
        $("#mymodallarge").modal("hide");
    }       
</script>