{% extends "base.html" %}

{% block title %}Connexion Personnel | BilletFest{% endblock %}

{% block content %}
<style>
    /* ============================================
       STYLES SPÉCIFIQUES À LA PAGE DE CONNEXION
       Thème Festif & Chaleureux - Mobile-First
       ============================================ */
    .login-page {
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem 1rem;
    }

    .login-card {
        background: white;
        border-radius: 30px;
        box-shadow: 0 20px 40px rgba(255, 140, 66, 0.15);
        width: 100%;
        max-width: 480px;
        padding: 2rem 1.8rem;
        border: 1px solid rgba(255, 140, 66, 0.2);
        transition: transform 0.3s ease;
    }

    .login-header {
        text-align: center;
        margin-bottom: 1.8rem;
    }

    .login-header h2 {
        font-family: 'Poppins', sans-serif;
        color: var(--warm-anthracite);
        font-weight: 700;
        font-size: 1.9rem;
        margin-bottom: 0.4rem;
    }

    .login-header .emoji {
        font-size: 2.5rem;
        display: block;
        margin-bottom: 0.2rem;
    }

    /* Bloc d'information pédagogique */
    .info-message {
        background: #FFF8E7;
        border-left: 6px solid var(--amber);
        border-radius: 20px;
        padding: 1.2rem 1.4rem;
        margin-bottom: 2rem;
        color: var(--warm-anthracite);
        font-size: 0.95rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    }

    .info-message p {
        margin-bottom: 1rem;
        line-height: 1.5;
    }

    .info-message .btn-shop {
        display: inline-block;
        background: transparent;
        border: 2px solid var(--sunset-start);
        color: var(--sunset-start);
        padding: 0.5rem 1.5rem;
        border-radius: 40px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.25s;
        font-size: 0.9rem;
    }

    .info-message .btn-shop:hover {
        background: var(--sunset-start);
        color: white;
        transform: translateY(-2px);
    }

    /* Formulaire */
    .login-form {
        margin-top: 0.5rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: var(--warm-anthracite);
        font-size: 0.95rem;
    }

    .input-icon-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-icon {
        position: absolute;
        left: 18px;
        color: var(--sunset-start);
        font-size: 1.2rem;
        pointer-events: none;
    }

    .login-form input[type="text"],
    .login-form input[type="password"] {
        width: 100%;
        padding: 1rem 1rem 1rem 3rem;
        font-size: 1rem;
        border: 2px solid #e9e3db;
        border-radius: 60px;
        background: white;
        transition: all 0.2s;
        font-family: 'Inter', sans-serif;
    }

    .login-form input:focus {
        border-color: var(--sunset-start);
        box-shadow: 0 0 0 4px rgba(255, 140, 66, 0.15);
        outline: none;
    }

    /* Gestion des erreurs */
    .errorlist {
        list-style: none;
        padding: 0.6rem 1rem;
        margin: 0.8rem 0 0 0;
        background: #FFE5E5;
        border-radius: 30px;
        color: #b91c1c;
        font-size: 0.9rem;
        border-left: 4px solid #D9534F;
    }

    .errorlist li {
        margin: 0.2rem 0;
    }

    .non-field-errors {
        margin-bottom: 1.5rem;
    }

    /* Bouton de connexion */
    .btn-login {
        background: linear-gradient(145deg, var(--sunset-start), var(--sunset-end));
        color: white;
        border: none;
        width: 100%;
        padding: 1rem;
        font-size: 1.2rem;
        font-weight: 700;
        border-radius: 60px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 8px 18px rgba(255, 108, 53, 0.3);
        margin: 0.8rem 0 1.2rem;
        font-family: 'Poppins', sans-serif;
        letter-spacing: 0.3px;
        border: 1px solid rgba(255,255,255,0.2);
    }

    .btn-login:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 24px rgba(255, 108, 53, 0.4);
        background: linear-gradient(145deg, #ff9a5a, #ff7a3d);
    }

    .btn-login:active {
        transform: translateY(1px);
        box-shadow: 0 5px 12px rgba(255, 108, 53, 0.3);
    }

    /* Liens supplémentaires */
    .login-footer {
        text-align: center;
        margin-top: 0.5rem;
        font-size: 0.9rem;
        color: #6b6b6b;
    }

    .login-footer a {
        color: var(--sunset-start);
        text-decoration: none;
        font-weight: 500;
    }

    .login-footer a:hover {
        text-decoration: underline;
    }

    /* Adaptation mobile */
    @media (max-width: 480px) {
        .login-card {
            padding: 1.8rem 1.2rem;
            border-radius: 24px;
        }
        .login-header h2 {
            font-size: 1.6rem;
        }
        .info-message {
            padding: 1rem;
        }
    }
</style>

<div class="login-page">
    <div class="login-card">
        <div class="login-header">
            <span class="emoji">🎟️🔐</span>
            <h2>Espace Personnel</h2>
        </div>

        {# Bloc d'information crucial pour les clients #}
        <div class="info-message">
            <p>
                <strong>⚠️ Cet espace est réservé aux administrateurs et agents de sécurité.</strong><br>
                Si vous êtes un client, vous n'avez pas besoin de compte pour acheter vos tickets.
            </p>
            <a href="{% url 'vitrine:home' %}" class="btn-shop">← Retour à la boutique</a>
        </div>

        <form method="POST" class="login-form" novalidate>
            {% csrf_token %}

            {# Affichage des erreurs non liées à un champ spécifique #}
            {% if form.non_field_errors %}
                <div class="non-field-errors">
                    <ul class="errorlist">
                        {% for error in form.non_field_errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

            <div class="form-group">
                <label for="id_username">Nom d'utilisateur</label>
                <div class="input-icon-wrapper">
                    <span class="input-icon">👤</span>
                    <input 
                        type="text" 
                        name="username" 
                        id="id_username" 
                        placeholder="ex: jean.dupont"
                        value="{{ form.username.value|default:'' }}"
                        required
                        autofocus
                    >
                </div>
                {% if form.username.errors %}
                    <ul class="errorlist">
                        {% for error in form.username.errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="id_password">Mot de passe</label>
                <div class="input-icon-wrapper">
                    <span class="input-icon">🔒</span>
                    <input 
                        type="password" 
                        name="password" 
                        id="id_password" 
                        placeholder="••••••••"
                        required
                    >
                </div>
                {% if form.password.errors %}
                    <ul class="errorlist">
                        {% for error in form.password.errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>

            <button type="submit" class="btn-login">✨ Se connecter ✨</button>

            <div class="login-footer">
                <p>Mot de passe oublié ? <a href="#">Contactez l'administrateur</a></p>
            </div>
        </form>
    </div>
</div>

{# JavaScript léger pour améliorer l'UX (focus, animations) #}
<script>
    (function() {
        // Ajoute une classe de style lors du focus sur les inputs
        const inputs = document.querySelectorAll('.login-form input');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.parentElement.classList.add('focused');
            });
            input.addEventListener('blur', function() {
                this.parentElement.parentElement.classList.remove('focused');
            });
        });

        // Petit effet de vibration festive sur le bouton au survol (facultatif)
        const btn = document.querySelector('.btn-login');
        if (btn) {
            btn.addEventListener('mouseenter', () => {
                btn.style.transition = 'all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
            });
        }
    })();
</script>
{% endblock %}