{% extends "base.html" %}

{% block head %}
<style>
    h1 {
        text-align: center;
    }

    form {
        max-width: 400px;
        margin: 50px auto;
        padding: 30px;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        font-family: sans-serif;
    }

    label {
        font-size: 1.1rem;
        font-weight: 600;
    }

    input[type="text"],
    input[type="password"] {
        width: 100%;
        padding: 12px;
        margin-top: 5px;
        margin-bottom: 20px;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    input[type="submit"] {
        width: 100%;
        padding: 12px;
        background-color: #4CAF50;
        color: white;
        font-size: 1.1rem;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    input[type="submit"]:hover {
        background-color: #45a049;
    }
</style>
{% endblock %}

{% block content %}
<h1>CyberCorp login</h1>
<form method="POST">
    <label for="username">Username:</label><br>
    <input type="text" name="username" required><br><br>

    <label for="password">Password:</label><br>
    <input type="password" name="password" required><br><br>

    <input type="submit" value="Login">
</form>

{% if error %}
<p class="error" style="color: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">{{ error }}</p>
{% endif %}
{% endblock %}