<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>Login || <%= 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="public/styles/scroll.css">
    <link rel="stylesheet" href="public/styles/main.css">
    <link rel="stylesheet" href="public/styles/login.css">
</head>
<body>
    <table id="loginFormSide" class="position-relative w-40 h-100 bg-white float-start">
        <tr>
            <td valign="top">
                <div id="main" class="text-center px-3 py-5">
                    <img src="<%= config.other.logo %>" class="rounded-circle" height="75" width="75" style="object-fit: cover;">
                    <br><br>
                    <h1>Login</h1>
                    <h4 class="text-muted">Login to <%= config.name %>'s Crew Center</h4>
                    <form class="w-100 text-start needs-validation mt-5 px-sm-5" action="/login" novalidate method="post">
                        <hr>
                        <div>
                            <label class="form-label fw-bold">Username</label>
                            <div class="input-group mb-3">
                                <span class="input-group-text" id="basic-addon1">
                                    <%= config.code%>
                                </span>
                                <input type="text" class="form-control" name='user' placeholder="Username" aria-label="Username"
                                    aria-describedby="basic-addon1" required>
                                <div class="invalid-feedback">Need a valid username</div>
                            </div>
                        </div>
                        <div>
                            <label class="form-label fw-bold">Password</label>
                            <a style="cursor: pointer" class="form-label float-end link link-primary text-decoration-none d-none d-sm-block"
                                onclick="resetAction(false)">Forgot Password?</a>
                            <input type="password" class="form-control" name="pwd" required placeholder="Password">
                            <div class="invalid-feedback">Need a valid password</div>
                        </div>
                        <button class="w-100 btn btn-primary mt-4" type="submit">Login</button>
                        <button class="mt-5 btn btn-danger d-block d-sm-none w-100" type="button" onclick="resetAction(false)">Reset
                            Password</button>
                    </form>
                    <p class="mt-5">Don't have an account? <a style="cursor: pointer" class="link link-primary text-decoration-none fw-bold"
                            onclick="applyAction('<%= config.other.applications.state %>' == 'true' ? true : false, '<%=config.other.applications.link%>')">Apply</a></p>
                </div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer" class="text-center">
                        <hr>
                        <p class="text-muted mb-4">Powered by VACenter V<%= version %>
                        </p>
                </div>
            </td>
        </tr>
    </table>
    <div id="loginBGSide" class="w-60 h-100 d-inline-block bg-danger float-end" style="background-image: url('<%= config.other.bg%>');">

    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
    <script src="https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js"></script>
    <script src="public/scripts/login.js"></script>
    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
            (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>