{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iniciar Sesión | Formula Gades</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html, body {
            height: 100%;
            overflow: hidden;
        }
        body {
            background-color: #111;
        }
        .login-bg {
            position: fixed;
            inset: 0;
            background-image: url("{% static 'images/monoplaza_gades.jpg' %}");
            background-size: cover;
            background-position: center;
            filter: brightness(0.35);
            z-index: 0;
        }
        .login-card {
            position: relative;
            z-index: 1;
            background: rgba(20, 20, 20, 0.88);
            border: 1px solid rgba(255,255,255,0.08);
            backdrop-filter: blur(6px);
        }
        .form-control {
            background-color: #1e1e1e;
            border-color: #444;
            color: #f0f0f0;
        }
        .form-control:focus {
            background-color: #1e1e1e;
            border-color: #0d6efd;
            color: #f0f0f0;
            box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
        }
        .form-control::placeholder { color: #888; }
        .form-label { color: #ccc; }
    </style>
</head>
<body class="d-flex align-items-center justify-content-center min-vh-100">

    <div class="login-bg"></div>

    <div class="login-card rounded-4 shadow-lg p-4 p-md-5" style="width: 100%; max-width: 420px;">

        <div class="text-center mb-4">
            <img src="{% static 'images/logo_gades.png' %}" alt="Formula Gades" height="60" class="mb-3">
            <h4 class="text-white fw-bold mb-1">Plataforma de gestión interna</h4>
            <p class="text-secondary small">Bienvenido al sistema interno del equipo.</p>
        </div>

        {% if form.errors %}
        <div class="alert alert-danger py-2 small" role="alert">
            Usuario o contraseña incorrectos. Inténtalo de nuevo.
        </div>
        {% endif %}

        <form method="post" action="{% url 'login' %}">
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ next }}">

            <div class="mb-3">
                <label for="id_username" class="form-label fw-semibold">Usuario</label>
                <input type="text" name="username" id="id_username"
                       class="form-control"
                       placeholder="Introduce tu usuario"
                       autofocus required>
            </div>

            <div class="mb-4">
                <label for="id_password" class="form-label fw-semibold">Contraseña</label>
                <input type="password" name="password" id="id_password"
                       class="form-control"
                       placeholder="Introduce tu contraseña"
                       required>
            </div>

            <div class="d-grid">
                <button type="submit" class="btn btn-primary fw-bold py-2">
                    Iniciar Sesión
                </button>
            </div>
        </form>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
