{% extends "base.html" %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center min-vh-100">
    <div class="card shadow-sm" style="width: 100%; max-width: 400px; border-radius: 12px; border: none;">
        <div class="card-body p-5">
            <h2 class="text-center mb-4" style="font-family: 'Poppins', sans-serif; font-weight: 700;">
                <span style="color: #10b981;">Fox</span>Fitt
            </h2>

            {% if form.errors %}
            <div class="alert alert-danger" role="alert">
                Your username and password didn't match. Please try again.
            </div>
            {% endif %}

            <form method="post" action="{% url 'login' %}">
                {% csrf_token %}
                <div class="mb-3">
                    <label for="id_username" class="form-label" style="font-family: 'Inter', sans-serif; font-weight: 500;">Username</label>
                    <input type="text" name="username" class="form-control form-control-lg" id="id_username" required autofocus style="border-radius: 8px;">
                </div>
                <div class="mb-4">
                    <label for="id_password" class="form-label" style="font-family: 'Inter', sans-serif; font-weight: 500;">Password</label>
                    <input type="password" name="password" class="form-control form-control-lg" id="id_password" required style="border-radius: 8px;">
                </div>
                <button type="submit" class="btn btn-lg w-100 text-white" style="background-color: #10b981; border: none; border-radius: 8px; font-weight: 600;">Login</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}