<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">
    <title>
        <%= user.display %> || <%= config.name %>
    </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
    <%- include("./components/head.ejs")%>
</head>

<body class="w-100 bg-light-light h-auto">
    <%- include("./components/nav.ejs")%>
        <div class="w-100 content bg-light-light px-3 px-md-5 py-3" id="content">
            
            <div class="container">
                <h1>
                    <img src="<%= user.profileURL%>" style="height: 0.8em; width: 0.8em; object-fit: cover;" class="rounded-circle align-text-bottom mb-2">
                    <%= user.display%>
                </h1>
                <h4><%= config.code + user.username%></h4>
                <h2>Account Information</h2>
                <hr>
                <% if(config.key && !(user.VANetID)){%>
                    <form class="row g-3 shadow p-3 border rounded mt-2 w-100 needs-validation text-center mx-auto text-md-start" novalidate method="POST" action='/users/linkVANet'>
                        <h1><i class="text-danger bi bi-exclamation-triangle"></i> Link IFC Account</h1>
                        <p>This is required to interact with VANet.</p>
                        <div class="col-md-4">
                            <label for="validationCustom01" class="form-label">IFC Name</label>
                            <input type="text" class="form-control" id="validationCustom01" value="" name="ifcname" required placeholder="EG: Sammy_Neale">
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                            <div class="invalid-feedback">
                                Please choose a name.
                            </div>
                        </div>
                        <div class="col-12">
                            <button class="btn btn-<%= config.other.navColor[2] %>" type="submit">Submit</button>
                        </div>
                    </form>    
                <%}%>
                <form class="row g-3 shadow p-3 border rounded mt-2 w-100 needs-validation text-center text-md-start mx-auto" novalidate method="POST" action="/user/update">
                    <div class="col-md-4">
                        <label for="validationCustom01" class="form-label">Name</label>
                        <input type="text" class="form-control" id="validationCustom01" value="<%= user.display %>" name="display" required>
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                        <div class="invalid-feedback">
                            Please choose a name.
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="validationCustom02" class="form-label">Profile Picture URL</label>
                        <input type="url" class="form-control" id="validationCustom02" value="<%= user.profileURL%>" name="url" required>
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                        <div class="invalid-feedback">
                            Please provide a valid URL.
                        </div>
                    </div>
                    <div class="col-12">
                        <button class="btn btn-<%= config.other.navColor[2] %>" type="submit">Submit</button>
                    </div>
                </form>
                <br>
                <h2>Security</h2>
                <hr>
                <form action="/OSOR" method="POST">
                    <button class="btn btn-<%= config.other.navColor[2] %> w-100" type="submit"><i class="bi bi-box-arrow-in-right"></i> Sign out everywhere</button>
                </form><br>
                <form class="row g-3 mx-0 shadow p-3 border rounded mt-2 w-100 needs-validation text-center text-md-start" novalidate method="POST"
                    action="/CPWD" onsubmit="if((document.getElementById('validationPwd1').value == document.getElementById('validationPwd2').value)==false){alert('Passwords do not match.')}; return document.getElementById('validationPwd1').value == document.getElementById('validationPwd2').value;">
                    <div class="col-md-4">
                        <label for="validationPwd1" class="form-label">New Password</label>
                        <input type="password" class="form-control" id="validationPwd1" name="npwd" required>
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                        <div class="invalid-feedback">
                            Please choose a password.
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="validationPwd2" class="form-label">Confirm New Password</label>
                        <input type="password" class="form-control" id="validationPwd2" name="cpwd" required>
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                        <div class="invalid-feedback">
                            Please choose a password.
                        </div>
                    </div>
                    <div class="col-12">
                        <button class="btn btn-danger" type="submit">Change PWD</button>
                    </div>
                </form>
                <br>
                <h2>User Data</h2>
                <hr>
                <div class="form-control p-3 mb-5">
                    <p>
                        <strong>Flight Hours: </strong><%= user.hours.toFixed(2)%><br>
                        <strong>Rank: </strong><%= user.rank%><br>
                        <strong>Account Created: </strong><%= new Date(user.created).toLocaleString(); %><br>
                    </p>
                </div>
            </div>
        </div>
        <%- include('./components/footer.ejs') %>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/suncalc/1.8.0/suncalc.min.js"
            integrity="sha512-s40QuZdS5wcjdt2OHUWSGRCECWr+YqbvRSaiBpEKOlOsbePPvXreeOTB4SVteinFcc1RpW/uDueEsknm9iJl2g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>
            (function () {
                    'use strict'

                    // Fetch all the forms we want to apply custom Bootstrap validation styles to
                    var forms = document.querySelectorAll('.needs-validation')

                    // Loop over them and prevent submission
                    Array.prototype.slice.call(forms)
                        .forEach(function (form) {
                            form.addEventListener('submit', function (event) {
                                if (!form.checkValidity()) {
                                    event.preventDefault()
                                    event.stopPropagation()
                                }

                                form.classList.add('was-validated')
                            }, false)
                        })
                })()
        </script>
        
</body>

</html>
