<div class="corps">
    <% if (errors && errors.length > 0) { %>
        <div class="alert alert-danger">
          <% errors.forEach(error => { %>
            <p><%= error.msg %></p>
          <% }) %>
        </div>
      <% } %>
    <div class="card">
        <div class="card-header">Edition</div>
        <div class="card-body">
            <form method="POST" action="/admin/update" >
                <input type="hidden" name="id" value="<%= admin.id %>">
                <div class="form-group">
                    <label for="matricules">Matricule</label>
                    <input type="text" class="form-control form-control-sm" value="<%= admin.matriculeEmployee %>" id="matricules" name="matriculeEmployee" readonly required/>
                </div>
                <div class="form-group">
                    <label for="nom">Nom</label>
                    <input type="text" class="form-control form-control-sm" value="<%= admin.firstName %>" id="nom" name="firstName" required/>
                </div>
                <div class="form-group">
                    <label for="prenom">Prénom</label>
                    <input type="text" class="form-control form-control-sm" value="<%= admin.lastName %>" id="prenom" name="lastName" required/>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control form-control-sm" value="<%= admin.email %>" id="email" name="email" required>
                </div>
                <% if(
                    req.session
                    && req.session.admin
                    && req.session.admin.role === 'Super admin'
                ) {%>
                <div class="form-group">
                    <label for="role">Rôle</label>              
                    <select name="role" class="form-select" id="role" aria-label="size 3 select example">                        
                      <option <% if(admin.role === 'User') {%> selected <% } %> value="User">User</option>
                      <option <% if(admin.role === 'Admin') {%> selected <% } %> value="Admin">Admin</option>
                      <option <% if(admin.role === 'Manager') {%> selected <% } %> value="Manager">Manager</option>
                      <option <% if(admin.role === 'Super admin') {%> selected <% } %> value="Super admin">Super admin</option>                          
                    </select>
                </div>
                <% } %>
                <div class="form-group" id="leader"></div>
                  
                <div class="form-group">
                    <label for="telephone">Numéro de téléphone</label>
                    <input type="tel" class="form-control form-control-sm" value="<%= admin.phoneNumber %>" id="telephone" name="phoneNumber" >
                </div>
                <!-- <div class="form-group">
                    <label for="photo">Photo de profil</label>
                    <input type="file" class="form-control-file" id="photo" name="photo" accept="image/*" required>
                </div> -->
                <button type="submit" class="btn btn-primary">Modifier</button>
                <button type="reset" class="btn btn-light">Annuler</button>
            </form>
        </div>
    </div>        
</div>

<script>
        var user = document.getElementById('role');
        var value = `
            <div class="form-group">
                <label for="leader">Encadreur</label>                
                <select name="leader" id="leader" class="form-select form-select-sm">
                  <option value="superieur" selected>Les supérieurs</option>
                  <% leaders.forEach(leader => { %>                    
                      <option value="<%= leader.id %>" <% if(leader.id == admin.leader) { %> selected <% } %> ><%= leader.firstName %> <%= leader.lastName %></option>                    
                  <% }); %>
                </select>
            </div>
        `
        var choice = document.getElementById('leader');
        if(user.value == 'User') {
            choice.innerHTML = value;
        }
        else {
            choice.innerHTML = '';
        }
        user.addEventListener('input', (event) => {
            if(user.value == 'User') {
                choice.innerHTML = value;
            }
            else {
                choice.innerHTML = '';
            }
        })
    </script>