{% extends "base.html" %}

{% block title %}Login - AI Chat Archive{% endblock %}

{% block content %}
<div class="container d-flex align-items-center justify-content-center min-vh-75">
    <div class="glass-card p-5 w-100" style="max-width: 450px;">
        <div class="text-center mb-4">
            <h2 class="fw-bold">Welcome Back</h2>
            <p class="text-secondary">Sign in to access your AI vault</p>
        </div>

        <form method="post" action="{% url 'login' %}">
            {% csrf_token %}
            
            {% if form.errors %}
            <div class="alert alert-danger bg-danger bg-opacity-10 border-danger text-danger mb-4">
                Your username and password didn't match. Please try again.
            </div>
            {% endif %}

            <div class="mb-3">
                <label for="id_username" class="form-label text-secondary small text-uppercase fw-bold">Username</label>
                <input type="text" name="username" autofocus maxlength="150" required id="id_username" 
                       class="form-control bg-dark bg-opacity-50 border-secondary text-white py-3">
            </div>

            <div class="mb-4">
                <label for="id_password" class="form-label text-secondary small text-uppercase fw-bold">Password</label>
                <input type="password" name="password" required id="id_password"
                       class="form-control bg-dark bg-opacity-50 border-secondary text-white py-3">
            </div>

            <button type="submit" class="btn btn-cyan w-100 py-3 fw-bold">Sign In</button>
            
            <input type="hidden" name="next" value="{{ next }}">
        </form>

        <div class="text-center mt-4 pt-4 border-top border-secondary border-opacity-25">
            <p class="text-secondary small">Demo credentials: <strong>admin</strong> / <strong>admin123</strong></p>
        </div>
    </div>
</div>
{% endblock %}