{% extends 'base.html.twig' %}
{% block title %}Connexion — Walk The Line{% endblock %}
{% block body %}
<div class="min-vh-100 d-flex align-items-center justify-content-center login-bg p-3">
<div class="card border-0 shadow-lg login-card">
<div class="card-body p-4 p-md-5">
<div class="text-center mb-4">
<img src="{{ asset('images/logo-wtl-black.png') }}" alt="Walk The Line" class="login-logo mb-3">
<p class="text-secondary mb-0">Espace de management</p>
</div>
{% if app.request.query.get('access') == 'denied' %}<div class="alert alert-warning"><i class="bi bi-shield-exclamation me-2"></i>Votre compte ne dispose pas des droits nécessaires pour accéder à l'espace de gestion.</div>{% endif %}
{% if app.request.query.get('access') == 'no_project' %}<div class="alert alert-warning"><i class="bi bi-diagram-3 me-2"></i>Votre compte back-office n’est associé à aucun projet. Contactez un administrateur avant de réessayer. {% if app.user %}<a href="{{ path('app_logout') }}" class="alert-link">Se déconnecter</a>{% endif %}</div>{% endif %}
{% for label,messages in app.flashes %}{% for message in messages %}<div class="alert alert-{{ label == 'danger' ? 'danger' : 'warning' }}">{{ message }}</div>{% endfor %}{% endfor %}
{% if login_security_message %}<div class="alert alert-danger"><i class="bi bi-shield-lock me-2"></i>{{ login_security_message }}</div>{% endif %}
{% if error and not login_blocked %}
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData,'security') }}</div>
{% endif %}
<form method="post" data-login-form data-recaptcha-site-key="{{ login_captcha_required ? login_recaptcha_site_key : '' }}">
<div class="mb-3">
<label class="form-label">E-mail</label>
<input class="form-control form-control-lg" type="email" name="_username" value="{{ last_username }}" autocomplete="email" required autofocus{% if login_blocked %} disabled{% endif %}>
</div>
<div class="mb-3">
<label class="form-label">Mot de passe</label>
<input class="form-control form-control-lg" type="password" name="_password" autocomplete="current-password" required{% if login_blocked %} disabled{% endif %}>
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
<input type="hidden" name="recaptcha_token" data-recaptcha-token value="">
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" name="_remember_me" id="remember"{% if login_blocked %} disabled{% endif %}>
<label class="form-check-label" for="remember">Rester connecté</label>
</div>
{% if login_captcha_required %}<p class="small text-secondary mb-3"><i class="bi bi-shield-check me-1"></i>Une vérification anti-robot est activée après plusieurs tentatives infructueuses.</p>{% endif %}
<button class="btn btn-dark btn-lg w-100"{% if login_blocked %} disabled{% endif %}>Se connecter</button>
</form>
</div>
</div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% if login_captcha_required and login_recaptcha_site_key %}
        <script src="https://www.google.com/recaptcha/api.js?render={{ login_recaptcha_site_key|url_encode }}" async defer></script>
        <script>
        (() => {
            const form = document.querySelector('[data-login-form]');
            if (!form) return;
            const siteKey = form.dataset.recaptchaSiteKey || '';
            let submitting = false;
            form.addEventListener('submit', (event) => {
                if (!siteKey || submitting) return;
                event.preventDefault();
                if (typeof grecaptcha === 'undefined') {
                    return;
                }
                submitting = true;
                grecaptcha.ready(() => {
                    grecaptcha.execute(siteKey, { action: 'login' }).then((token) => {
                        const input = form.querySelector('[data-recaptcha-token]');
                        if (input) input.value = token;
                        form.submit();
                    }).catch(() => { submitting = false; });
                });
            });
        })();
        </script>
    {% endif %}
{% endblock %}