<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body,
        html {
            height: 100%;
        }
    </style>
    <%- include('./partials/head') %>
    <title><%= config.meta.title %> - Login</title>
</head>

<body>
    <div id="particles-js"></div>
    <div class="container h-100 d-flex justify-content-center">
        <div class="jumbotron my-auto">
            <h1 class="display-4" style="text-align: center;">Login</h1>
            <form action="/login" method="post">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="Your Username">
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" name="password"
                        placeholder="Your Password">
                </div>
                <button type="submit" class="btn btn-primary" style="border-radius: 50px; width: 100%;">Login</button>
            </form>
        </div>
    </div>
    <p style="display:none" id="partenabled"><%=config.particles.enabled%></p>
    <p style="display:none" id="part"><%=JSON.stringify(config.particles.settings) %></p>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@9/dist/sweetalert2.min.js"></script>
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>if (document.getElementById('partenabled').innerText === "true") particlesJS("particles-js", JSON.parse(document.getElementById('part').innerText));</script>
    <script>
        if (document.getElementById('check').value === 'true') {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'You entered a wrong username or password',
                footer: 'Try again later...'
            })
        }
    </script>
</body>

</html>