{% extends 'Bootstrap.html' %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center min-vh-100">
    <div class="card shadow-lg p-4" style="max-width: 400px; width: 100%;">
        <h2 class="text-center mb-4">Kirjaudu Sisään</h2>

        {% if form.errors %}
        <div class="alert alert-danger text-center">
            Käyttäjänimi tai salasana on virheellinen!
        </div>
        {% endif %}

        <form method="post">
            {% csrf_token %}

            <div class="mb-3">
                <label for="id_username" class="form-label">Käyttäjänimi:</label>
                <input type="text" name="username" id="id_username" class="form-control" required placeholder="Syötä käyttäjänimi">
            </div>

            <div class="mb-3">
                <label for="id_password" class="form-label">Salasana:</label>
                <input type="password" name="password" id="id_password" class="form-control" required placeholder="Syötä salasana">
            </div>

            <button type="submit" class="btn btn-primary w-100">Kirjaudu</button>
        </form>

        <div class="text-center mt-3">
            <a href="{% url 'password_reset' %}" class="text-decoration-none">Unohditko salasanasi?</a>
        </div>
    </div>
</div>
{% endblock %}