{{ extends "pagelayout.jet" }}

{{ block pageContent() }}
<div class="flex items-center justify-center min-h-screen bg-gray-100">
    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md mx-4">
        <h2 class="text-2xl font-bold mb-6 text-center">Login</h2>
        <form action="/login" method="post">
            <div class="mb-4">
                <label for="username" class="block text-gray-700">Username:</label>
                <input type="text" id="username" name="username" required class="mt-1 w-full p-2 border border-gray-300 rounded">
            </div>
            <div class="mb-4">
                <label for="password" class="block text-gray-700">Password:</label>
                <input type="password" id="password" name="password" required class="mt-1 w-full p-2 border border-gray-300 rounded">
            </div>
            <div class="flex items-center justify-center">
                <input type="submit" value="Login" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded cursor-pointer">
            </div>
        </form>
    </div>
</div>

<style>
    .min-h-screen {
        min-height: calc(100vh - 4rem); /* Adjust based on navbar height */
    }
</style>
{{ end }}