{% extends 'base.html' %}

{% block title %}Login | {{ project_name }}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="card bg-card border-0 rounded-4 p-4 shadow-lg">
                <h2 class="h4 mb-4 fw-bold">Login</h2>
                
                {% if form.errors %}
                <div class="alert alert-danger small">
                    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 text-muted small">Username</label>
                        <input type="text" name="username" autofocus maxlength="150" required id="id_username" class="form-control bg-dark border-secondary text-white">
                    </div>
                    <div class="mb-3">
                        <label for="id_password" class="form-label text-muted small">Password</label>
                        <input type="password" name="password" required id="id_password" class="form-control bg-dark border-secondary text-white">
                    </div>
                    
                    <button type="submit" class="btn btn-primary-custom w-100 mt-3 fw-bold">Login</button>
                    <input type="hidden" name="next" value="{{ next }}">
                </form>
                
                <div class="mt-4 text-center">
                    <p class="small text-muted mb-0">Don't have an account? <a href="{% url 'signup' %}" class="text-accent-green text-decoration-none">Create one</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .text-accent-green { color: var(--accent-green); }
    .bg-card { background-color: var(--card-bg); }
    .form-control:focus {
        background-color: var(--bg-dark);
        border-color: var(--accent-green);
        box-shadow: 0 0 0 0.25rem rgba(0, 255, 173, 0.1);
        color: white;
    }
</style>
{% endblock %}