{% extends "base.html" %}
{% load static %}

{% block title %}Connexion{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/accounts/login.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid min-vh-100 d-flex align-items-center justify-content-center py-5">
    <div class="row justify-content-center w-100">
        <div class="col-12 col-sm-8 col-md-6 col-lg-4">
            <!-- Carte de Connexion -->
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 p-md-5">
                    <!-- Titre -->
                    <h2 class="text-center mb-4">Accéder à votre espace</h2>
                    
                    <!-- Formulaire -->
                    <form method="post">
                        {% csrf_token %}
                        
                        <!-- Affichage des erreurs globales -->
                        {% if form.non_field_errors %}
                            <div class="alert alert-danger" role="alert">
                                {{ form.non_field_errors.as_text }}
                            </div>
                        {% endif %}
                        
                        <!-- Champ Nom d'utilisateur / Email -->
                        <div class="mb-3">
                            <label for="{{ form.username.id_for_label }}" class="form-label">
                                {{ form.username.label }}
                            </label>
                            <input type="text" 
                                   name="{{ form.username.name }}" 
                                   id="{{ form.username.id_for_label }}" 
                                   class="form-control{% if form.username.errors %} is-invalid{% endif %}" 
                                   value="{{ form.username.value|default:'' }}"
                                   placeholder="Votre nom d'utilisateur ou email"
                                   required>
                            <!-- Affichage des erreurs pour ce champ -->
                            {% if form.username.errors %}
                                <div class="invalid-feedback">
                                    {{ form.username.errors.as_text }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Champ Mot de passe -->
                        <div class="mb-4">
                            <label for="{{ form.password.id_for_label }}" class="form-label">
                                {{ form.password.label }}
                            </label>
                            <div class="position-relative">
                                <input type="password" 
                                       name="{{ form.password.name }}" 
                                       id="{{ form.password.id_for_label }}" 
                                       class="form-control{% if form.password.errors %} is-invalid{% endif %}" 
                                       placeholder="Votre mot de passe"
                                       required>
                                <button type="button" 
                                        class="btn btn-outline-secondary position-absolute top-50 end-0 translate-middle-y me-2 border-0" 
                                        id="togglePassword" 
                                        style="z-index: 10;">
                                    <i class="bi bi-eye" id="togglePasswordIcon"></i>
                                </button>
                            </div>
                            <!-- Affichage des erreurs pour ce champ -->
                            {% if form.password.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.password.errors.as_text }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Option "Se souvenir de moi" -->
                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="rememberMe" name="remember_me">
                                <label class="form-check-label" for="rememberMe">
                                    Se souvenir de moi
                                </label>
                            </div>
                        </div>
                        
                        <!-- Bouton de soumission -->
                        <button type="submit" class="btn btn-primary w-100 mb-3">
                            <i class="bi bi-box-arrow-in-right me-2"></i>
                            Se connecter
                        </button>
                    </form>
                    
                    <!-- Lien mot de passe oublié -->
                    <div class="text-center mb-3">
                        <a href="#" class="text-decoration-none small">
                            <i class="bi bi-question-circle me-1"></i>
                            Mot de passe oublié ?
                        </a>
                    </div>
                    
                    <!-- Séparateur -->
                    <hr class="my-4">
                    
                    <!-- Liens d'inscription -->
                    <div class="text-center">
                        <p class="mb-3 text-muted">Pas encore de compte ?</p>
                        <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                            <a href="{% url 'accounts:client_register' %}" 
                               class="btn btn-outline-primary me-md-2">
                                <i class="bi bi-person-plus me-1"></i>
                                Devenir Client
                            </a>
                            <a href="{% url 'accounts:affiliate_register' %}" 
                               class="btn btn-outline-secondary">
                                <i class="bi bi-people me-1"></i>
                                Devenir Affilié
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Note de sécurité -->
            <div class="text-center mt-4">
                <small class="text-muted">
                    <i class="bi bi-shield-lock me-1"></i>
                    Connexion sécurisée et chiffrée
                </small>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/accounts/login.js' %}"></script>
{% endblock %}