<% if (privilegios.indexOf('crear_usuarios') >= 0) { %>
    <%- include('includes/head.ejs') %>
        <section>
            <style>
                section{
                    margin-bottom: 20px;
                }
                h1{
                    margin-top: 1em;
                    margin-left: 1em;
                    font-size: 76px;
                }

                .btn.btn-secondary.bg-white.dropdown-toggle.text-dark.w-100{
                    min-height: 57px;
                    border-color: lightgray;
                }
                
                #delUser {
                    margin-top: 7em;
                    margin-left: -10em;
                }

            </style>
            <div class="row">
                <div class="col-md-10">
    
                    <h1 class="fw-light">
                        <%= userInfo.user_Name %>
                    </h1>
                </div>
                <div class="col-md-2">
                    <form action="/users/account/edituser/<%= userInfo.user_ID %>/delete" method="POST">
                        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                        <div class="col-md-4">
                            <% if (userInfo.user_ID != 3) { %>
                                <button id="delUser" class="btn btn-outline-danger" onclick="return confirm('Are you sure you want to delete this account?')" type="submit">Delete account</button>
                            <% } %>
                        </div>
                    </form>
                </div>
            </div>

            <form action="/users/account/edituser/<%= userInfo.user_Name %>" method="POST">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <div class="row">
                    <div class="col-md-4">
                        <br><br><br>
                        <div class="container text-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" fill="currentColor"
                                class="bi bi-person-fill" viewBox="0 0 16 16">
                                <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
                            </svg>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <br><br><br>
                        <div class="row g-2">
                            <div class="col-md">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="user_Name" name="user_Name" value="<%=userInfo.user_Name%>">
                                    <label for="user_Name">Name:</label>
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="ticket_Assignee_ID" name="ticket_Assignee_ID" value="<%=userInfo.ticket_Assignee_ID%>" disabled>
                                    <label for="ticket_Assignee_ID">Assignee ID:</label>
                                </div>
                            </div>
                        </div>
                        <br><br><br>
                        <div class="row g-2">
                            <div class="col-md">
                                <div class="form-floating">
                                    <input type="email" class="form-control" id="user_Mail" name="user_Mail" value="<%=userInfo.user_Mail%>">
                                    <label for="user_Mail">Email:</label>
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="form-floating" id="user_Skill">
                                    <select class="form-select" id="floatingSelectGrid" name="user_Skill" required>
                                        <option value="<%=userInfo.user_Skill%>"><%=userInfo.user_Skill%></option>
                                        <% if (userInfo.user_Skill == 'Front End') { %>
                                        <option value="Back End">Back End</option>
                                        <% } else { %>
                                        <option value="Front End">Front End</option>
                                        <% } %>
                                    </select>
                                    <label for="floatingSelectGrid">Skill</label>
                                </div>
                            </div>
                        </div>
                        <br><br><br>
                        <div class="row g-2">
                            <div class="col-md">
                                <div class="form-floating">
                                    <input type="tel" class="form-control" id="user_Phone" name="user_Phone" placeholder="name@example.com" value="<%=userInfo.user_Phone%>">
                                    <label for="user_Phone">Phone number:</label>
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="user_WeeklyAgilePoints" name="user_WeeklyAgilePoints" placeholder="name@example.com"
                                        value="<%=userInfo.user_WeeklyAgilePoints%>">
                                    <label for="user_WeeklyAgilePoints">Weekly AP:</label>
                                </div>
                            </div>
                        </div>
                        <br><br><br><br>
                    </div>
                </div>

                <div class="container text-center">
                    <div class="row">
                        <div class="col-md-4">
                            <a class="btn btn-outline-secondary" type="button" href="/users/totalusers">
                                Return
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-arrow-return-left" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                        d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
                                </svg>
                            </a>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <button class="btn btn-outline-success" type="submit">Save</button>
                        </div>
                    </div>
                </div>
                
            </form>
            
        </section>
        
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>

    <%- include('includes/foot.ejs') %>
<% } else { %>
    <%- include('includes/head.ejs') %>
        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
    <title>Error</title>
</head>
<body>
    <section>
        <br><br><br>
        <div class="d-flex align-items-center justify-content-center vh-50">
            <div class="text-center">
                <h1 class="display-1 fw-bold">401</h1>
    
                <p class="fs-3"> <span class="text-danger">Oops!</span> Invalid credentials.</p>
    
                <p class="lead">
                    You do not have permission to view this page.
                </p>
    
                <br>
    
                <div class="d-grid gap-2 col-6 mx-auto">
                    <a class="btn btn-primary btn-lg" type="button" href="../../../homepage">Homepage</a>
                </div>
        </div>
    </section>
    <%- include('includes/foot.ejs') %>
<% } %>