<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <style>
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    
<div class="container">

    <div class="row text-center"><h1 class="display-1">Login</h1></div>

    <div id="limca" class="text-center">
        <div class="row">
        <% if (message && message.length > 0) { %>
            <p class="error"><%= message[0] %></p>
        <% } %>

        <form method="POST" action="/login" class="text-center">
            <div class="form-control-sm mb-3">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" class="form-control" placeholder="Username">
                
            </div>
            <div class="form-control-sm mb-3">
                <label for="password">Password:</label>
                <input type="password" name="password" id="password" class="form-control" placeholder="Password">
                
            </div>
            <button type="submit" class="btn btn-primary">Login</button>
        </form>
    </div>
</div>

    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
    
    <style>
        #limca {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</body>
</html>
