
<%- 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;
            }
        </style>
        <h1 class="fw-light">
            <%= userInfo.user_Name %>
        </h1>

        <form action="/users/account/edit" 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/account">
                            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') %>