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

{% block title %}Inscription{% endblock %}

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

{% block body %}
    {{ form_start(form, {attr: {novalidate: 'novalidate'}}) }}

    <div style="position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden" aria-hidden="true">
        <input type="text" name="_website" tabindex="-1" autocomplete="off">
    </div>
    <input type="hidden" name="_form_time" value="{{ "now"|date("U") }}">

    <div class="register-card">

        {% include 'partials/_auth_logo.html.twig' with {class: 'register-logo'} %}

        <h1>Créer un compte.</h1>
        <p class="register-subtitle">Rejoignez-nous en quelques secondes</p>

        <div class="register-steps">
            <div class="register-step active">
                <div class="register-step-dot">1</div>
                <span>Identité</span>
            </div>
            <div class="register-step-line"></div>
            <div class="register-step">
                <div class="register-step-dot">2</div>
                <span>Compte</span>
            </div>
            <div class="register-step-line"></div>
            <div class="register-step">
                <div class="register-step-dot">3</div>
                <span>Confirmation</span>
            </div>
        </div>

        {% set formErrors = form_errors(form) %}
        {% if formErrors is not empty %}
            <div class="register-errors">
                {{ formErrors }}
            </div>
        {% endif %}

        <div class="register-row-2">
            <div class="register-field">
                {{ form_label(form.firstName, 'Prénom <span class="required">*</span>', {label_html: true}) }}
                <div class="register-input-wrap">
                    {{ form_widget(form.firstName, {attr: {placeholder: 'Marie'}}) }}
                    <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
                </div>
                <div data-error="firstName">{{ form_errors(form.firstName) }}</div>
            </div>
            <div class="register-field">
                {{ form_label(form.lastName, 'Nom <span class="required">*</span>', {label_html: true}) }}
                <div class="register-input-wrap">
                    {{ form_widget(form.lastName, {attr: {placeholder: 'Dupont'}}) }}
                    <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
                </div>
                <div data-error="lastName">{{ form_errors(form.lastName) }}</div>
            </div>
        </div>

        <div class="register-field">
            {{ form_label(form.email, 'Adresse e-mail <span class="required">*</span>', {label_html: true}) }}
            <div class="register-input-wrap">
                {{ form_widget(form.email, {attr: {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 data-error="email">{{ form_errors(form.email) }}</div>
        </div>

        <div class="register-field">
            {{ form_label(form.password.first, 'Mot de passe <span class="required">*</span>', {label_html: true}) }}
            <div class="register-input-wrap has-eye">
                {{ form_widget(form.password.first, {attr: {placeholder: 'Min. 12 caractères'}}) }}
                <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" id="register-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 class="register-strength">
                <div class="register-strength-bar" id="rs1"></div>
                <div class="register-strength-bar" id="rs2"></div>
                <div class="register-strength-bar" id="rs3"></div>
                <div class="register-strength-bar" id="rs4"></div>
            </div>
            <div class="register-strength-label" id="rs-label"></div>
            <ul class="pwd-rules">
                <li class="pwd-rule" data-rule="length">
                    <span class="pwd-rule-icon"></span>
                    Au moins 12 caractères
                </li>
                <li class="pwd-rule" data-rule="upper">
                    <span class="pwd-rule-icon"></span>
                    Une lettre majuscule
                </li>
                <li class="pwd-rule" data-rule="digit">
                    <span class="pwd-rule-icon"></span>
                    Un chiffre
                </li>
                <li class="pwd-rule" data-rule="lower">
                    <span class="pwd-rule-icon"></span>
                    Une lettre minuscule
                </li>
                <li class="pwd-rule" data-rule="special">
                    <span class="pwd-rule-icon"></span>
                    Un caractère spécial (- + ! * $ @ % _ ? .)
                </li>
            </ul>
            <div class="pwd-refused">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
                Caractères refusés&nbsp;: <code>&lt; &gt; &amp; " ' ` \ /</code>
            </div>
        </div>

        <div class="register-field">
            {{ form_label(form.password.second, 'Confirmer le mot de passe <span class="required">*</span>', {label_html: true}) }}
            <div class="register-input-wrap has-eye">
                {{ form_widget(form.password.second, {attr: {placeholder: 'Répétez le mot de passe'}}) }}
                <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 data-error="password">{{ form_errors(form.password.first) }}</div>
        </div>

        <label class="register-cgu">
            {{ form_widget(form.agreeTerms) }}
            <span>En créant mon compte, je déclare avoir lu et j'accepte les <a href="#" class="legal-modal-link" data-url="{{ path('app_legal_cgu') }}">conditions générales d'utilisation</a> ainsi que la <a href="#" class="legal-modal-link" data-url="{{ path('app_legal_privacy') }}">politique de confidentialité</a> du service.</span>
        </label>
        <div data-error="agreeTerms">{{ form_errors(form.agreeTerms) }}</div>

        <button type="submit" class="register-btn">Créer mon compte</button>

        {% if siteIntegration.googleAuthEnabled %}
        <div class="register-divider">ou s'inscrire avec</div>

        <a href="{{ path('app_google_connect') }}" class="register-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 %}

        <p class="register-footer-link">Déjà un compte ? <a href="{{ path('app_login') }}">Se connecter</a></p>

    </div>
    {{ form_end(form) }}

{# ── Legal modal ── #}
<div class="legal-modal-overlay" id="legal-modal-overlay">
    <div class="legal-modal" onclick="event.stopPropagation()">
        <div class="legal-modal-head">
            <h3 id="legal-modal-title"></h3>
            <button type="button" class="legal-modal-close" id="legal-modal-close" aria-label="Fermer">
                <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="legal-modal-body" id="legal-modal-body"></div>
    </div>
</div>

    <link rel="stylesheet" href="{{ asset('css/legal-modal.css') }}">
{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/register.js') }}?v={{ "now"|date("U") }}"></script>
<script src="{{ asset('js/legal-modal.js') }}"></script>
{% endblock %}