{% extends 'base.html.twig' %}

{% block title %}Connexion - Eolia Normandie{% endblock %}

{% block body %}
    <div class="container py-5">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6 wow fadeInLeft" data-wow-delay="0.1s">
                <div class="card shadow-lg border-0 rounded-lg">
                    <div class="card-header bg-eolia text-white py-3">
                        <h3 class="mb-0 text-center"><i class="fas fa-sign-in-alt me-2"></i> Connexion</h3>
                    </div>
                    <div class="card-body p-4">
                        {% if bannedMessage is defined %}
                            <div class="alert alert-danger d-flex align-items-center" role="alert">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <div>{{ bannedMessage }}</div>
                            </div>
                        {% endif %}

                        <p class="lead mb-4">Bienvenue sur l'espace réservé aux membres du club Eolia.</p>
                        <p class="mb-4">Pour adhérer, vous devez disposer d'un compte validé par notre administrateur. 
                            <a href="{{ path('register') }}" class="text-decoration-none fw-bold">
                                <i class="fas fa-user-plus me-1"></i> Créer un compte
                            </a>
                        </p>

                        <form method="post" class="needs-validation">
                            <div class="row g-4">
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="identifiant" placeholder="identifiant" 
                                            value="{{ last_username }}" name="username" autocomplete="username" required autofocus>
                                        <label for="identifiant"><i class="fas fa-user me-2"></i>Identifiant</label>
                                    </div>
                                </div>
                                
                                <div class="col-12">
                                    <div class="form-floating position-relative">
                                        <input type="password" class="form-control" id="password" placeholder="Mot de passe" 
                                            name="password" autocomplete="current-password" required>
                                        <label for="password"><i class="fas fa-lock me-2"></i>Mot de passe</label>
                                        <button type="button" id="togglePassword" class="btn btn-outline-secondary position-absolute toggle-password-btn">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="col-12 d-flex justify-content-between align-items-center">
                                    <a href="mailto:eolia-normandie@orange.fr" class="text-decoration-none">
                                        <i class="fas fa-question-circle me-1"></i>Mot de passe oublié?
                                    </a>
                                </div>
                                
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                                
                                <div class="col-12 mt-3">
                                    <button class="btn blue text-white w-100 py-3 rounded-pill" type="submit">
                                        <i class="fas fa-sign-in-alt me-2"></i>Connexion
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer text-center py-3 bg-light">
                        <div class="small">
                            <a href="mailto:eolia-normandie@orange.fr" class="text-decoration-none">
                                <i class="fas fa-envelope me-1"></i>Un problème? Contacter un administrateur
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6 wow fadeInRight" data-wow-delay="0.5s">
                <div class="card shadow-lg border-0 rounded-lg h-100">
                    <div class="card-header bg-eolia text-white py-3">
                        <h3 class="mb-0 text-center"><i class="fas fa-map-marked-alt me-2"></i> Nous trouver</h3>
                    </div>
                    <div class="card-body p-0">
                        <div class="ratio ratio-16x9 h-100">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5197.203106417406!2d-0.8445321596900931!3d49.359689570883155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x480ba8296c61120d%3A0x3de2d6bbb644f1b3!2sEOLIA%20Normandie%20(CPNOB)!5e0!3m2!1sfr!2sfr!4v1704875614254!5m2!1sfr!2sfr" 
                                style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                    <div class="card-footer text-center py-3 bg-light">
                        <div class="d-flex justify-content-center">
                            <div class="me-4">
                                <i class="fas fa-map-marker-alt text-eolia me-1"></i> Le Cavey, 14710 COLLEVILLES SUR MER
                            </div>
                            <div>
                                <i class="fas fa-phone-alt text-eolia me-1"></i> 02.31.22.26.21
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if valide is defined and valide == false and not is_granted('ROLE_ADMIN') %}
        <script>
            function accountNotValidated() {
                Swal.fire({
                    icon: "error",
                    title: "Veillez patienter",
                    text: "Votre compte est en train d'être validé",
                    footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
                });
            }
            window.onload = accountNotValidated;
        </script>
    {% endif %}

    {% if banned is defined and banned == true and not is_granted('ROLE_ADMIN') %}
        <script>
            function accountNotValidated() {
                Swal.fire({
                    icon: "error",
                    title: "Banni",
                    text: "Vous avez été banni",
                    footer: '<a href="{{ path('accueil') }}">retourner à l\'accueil</a>'
                });
            }
            window.onload = accountNotValidated;
        </script>
    {% endif %}

    <script>
        document.getElementById("togglePassword").addEventListener("click", function() {
            const passwordField = document.getElementById("password");
            const icon = this.querySelector("i");

            if (passwordField.type === "password") {
                passwordField.type = "text";
                icon.classList.remove("fa-eye");
                icon.classList.add("fa-eye-slash");
            } else {
                passwordField.type = "password";
                icon.classList.remove("fa-eye-slash");
                icon.classList.add("fa-eye");
            }
        });
    </script>
{% endblock %}