<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>VACenter Login</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">
    <link rel="stylesheet" href="assets/styles/scroll.css">
    <link rel="stylesheet" href="assets/styles/main.css">
    <%- include('components/head')%>
    <link rel="stylesheet" href="/public/styles/public.css">
</head>

<body class="w-100" style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('<%= config.other.bg %>');">
    <div class="box w-100">
        <div class="row header px-5 py-3 fs-5 w-100 end-0 bg-white">
            <div class="d-block text-center text-md-left" style="line-height: 1.75em;">
                <span class="fw-bold float-md-start me-3">
                    <img src="<%= config.other.logo %>" class="rounded-circle"
                        style="object-fit: cover; width: 1em; height: 1em; vertical-align:text-bottom">
                    <%= config.name%>
                </span>
            </div>
        </div>
        <div class="row text-white content w-100 end-0">
            <div class="position-relative py-5 px-3 px-md-5">
                <h2><%= config.name%></h2>
                <h1 class="display-3 fw-bold h-auto">Change Password</h1>
                <p class="fs-4">You have been requested to change your password.</p>
                <form class="w-100 form-control my-3 p-3 needs-validation" action="/CPWD" method="post" novalidate>
                    <h4>Change Password</h4>
                    <div>
                        <label class="fw-bold">New Password:</label>
                        <input class="form-control" type="password" placeholder="Password" name="npwd" required>
                        <div class="invalid-feedback">
                            Need a valid password
                        </div>
                    </div>
                    <br>
                    <button class="btn btn-primary">Change</button>
                </form>
            </div>
        </div>
        <div class="row footer w-100">
            <div class="w-100 text-center p-2 pb-0 text-light">
                <p>Powered by VACenter V<%= version%>
                </p>
            </div>
        </div>
    </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/dist/sweetalert.min.js"></script>
</body>

</html>