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

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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/login.css') }}">
{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/login.js') }}"></script>
{% endblock %}

{% block body %}
    <div class="login-card">

        {% include 'partials/_auth_logo.html.twig' %}

        <h1>Bon retour.</h1>
        <p class="login-subtitle">Connectez-vous à votre espace personnel</p>

        {% if error %}
            <script>document.addEventListener('DOMContentLoaded', function() { showToast('error', { message: {{ error.messageKey|trans(error.messageData, 'security')|json_encode|raw }} }); });</script>
        {% endif %}

        <form method="post">

            <div class="login-field">
                <label for="inputEmail">Adresse e-mail <span class="required">*</span></label>
                <div class="login-input-wrap">
                    <input type="email" value="{{ last_username }}" name="email" id="inputEmail"
                           autocomplete="email" required autofocus placeholder="vous@exemple.com">
                    <svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>
                </div>
            </div>

            <div class="login-field">
                <label for="inputPassword">Mot de passe <span class="required">*</span></label>
                <div class="login-input-wrap has-eye">
                    <input type="password" name="password" id="inputPassword"
                           autocomplete="current-password" required placeholder="••••••••">
                    <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                    <button type="button" class="pwd-toggle" aria-label="Afficher le mot de passe">
                        <svg class="eye-on"  viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                        <svg class="eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                    </button>
                </div>
            </div>

            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

            <div class="login-row">
                <label class="login-remember">
                    <input type="checkbox" name="_remember_me"> Se souvenir de moi
                </label>
                {% if siteParams.forgotPasswordEnabled %}
                    <a href="{{ path('app_forgot_password') }}" class="login-forgot">Mot de passe oublié ?</a>
                {% endif %}
            </div>

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

        </form>

        {% if siteIntegration.googleAuthEnabled %}
        <div class="login-divider">ou continuer avec</div>

        <a href="{{ path('app_google_connect') }}" class="login-btn-social">
            <svg width="18" height="18" viewBox="0 0 24 24">
                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
            </svg>
            Continuer avec Google
        </a>
        {% endif %}

        {% if siteParams.registrationEnabled %}
            <p class="login-footer-link">Pas encore de compte ? <a href="{{ path('app_register') }}">S'inscrire</a></p>
        {% endif %}

    </div>
{% endblock %}