{% extends '_auth/base_auth.html.twig' %}

{% block title %}Inscription — Créer votre compte · Vulcan' Affûtage{% endblock %}
{% block metaDesc %}Créez votre compte client Vulcan' Affûtage pour commander des couteaux artisanaux et suivre vos affûtages à Clermont-Ferrand.{% endblock %}

{% block auth_aside %}
    <span class="auth-aside-eyebrow">Espace client · Clermont-Ferrand</span>
    <h2>Rejoignez <em>l'atelier</em>.</h2>
    <p>Créez votre compte pour commander nos couteaux artisanaux, suivre vos affûtages et retrouver vos commandes en un coup d'œil.</p>
{% endblock %}

{% block auth_panel %}
    <span class="auth-eyebrow">Créer un compte</span>
    <h1>Inscription</h1>
    <a href="{{ path('app_client_login') }}" class="auth-alt-link">Déjà un compte ? Se connecter</a>

    {% if form_error is defined and form_error %}<div class="auth-banner" role="alert">{{ form_error }}</div>{% endif %}
    {% if form_info is defined and form_info %}<div class="auth-banner auth-banner--info" role="status">{{ form_info }}</div>{% endif %}

    {# Erreurs affichées dans la page, sous le champ concerné (plus de toast).
       Chaque ligne de message existe toujours, hauteur réservée : l'apparition
       d'une erreur ne décale pas le formulaire. Sous le mot de passe, la même
       phrase sert de consigne en gris puis d'erreur en rouge. #}
    {% set regleMdp = regleMdp|default('8 caractères minimum, dont au moins 3 types : minuscule, majuscule, chiffre, symbole.') %}
    <form class="auth-form" action="{{ path('app_inscription') }}" method="post" data-auth-form novalidate>
        <div>
            <div class="chk-field">
                <input id="email" name="email" type="email" placeholder=" " value="{{ old.email|default('') }}" autocomplete="email" required
                       aria-describedby="email-msg" class="{{ errors.email is defined ? 'invalid' : '' }}"{% if errors.email is defined %} aria-invalid="true"{% endif %}>
                <label for="email">E-mail</label>
            </div>
            <p id="email-msg" class="auth-field-msg{{ errors.email is defined ? ' is-error' : '' }}" data-auth-msg="email"{% if errors.email is defined %} role="alert"{% endif %} aria-live="polite">{{ errors.email|default('') }}</p>
        </div>

        <div class="auth-row2">
            <div>
                <div class="chk-field">
                    <input id="prenom" name="prenom" type="text" placeholder=" " value="{{ old.prenom|default('') }}" autocomplete="given-name" required
                           aria-describedby="prenom-msg" class="{{ errors.prenom is defined ? 'invalid' : '' }}"{% if errors.prenom is defined %} aria-invalid="true"{% endif %}>
                    <label for="prenom">Prénom</label>
                </div>
                <p id="prenom-msg" class="auth-field-msg{{ errors.prenom is defined ? ' is-error' : '' }}" data-auth-msg="prenom"{% if errors.prenom is defined %} role="alert"{% endif %} aria-live="polite">{{ errors.prenom|default('') }}</p>
            </div>
            <div>
                <div class="chk-field">
                    <input id="nom" name="nom" type="text" placeholder=" " value="{{ old.nom|default('') }}" autocomplete="family-name" required
                           aria-describedby="nom-msg" class="{{ errors.nom is defined ? 'invalid' : '' }}"{% if errors.nom is defined %} aria-invalid="true"{% endif %}>
                    <label for="nom">Nom</label>
                </div>
                <p id="nom-msg" class="auth-field-msg{{ errors.nom is defined ? ' is-error' : '' }}" data-auth-msg="nom"{% if errors.nom is defined %} role="alert"{% endif %} aria-live="polite">{{ errors.nom|default('') }}</p>
            </div>
        </div>

        <div>
            <div class="chk-field">
                <input id="password" name="password" type="password" placeholder=" " autocomplete="new-password" required
                       aria-describedby="password-msg" class="{{ errors.password is defined ? 'invalid' : '' }}"{% if errors.password is defined %} aria-invalid="true"{% endif %}>
                <label for="password">Mot de passe</label>
            </div>
            <div class="auth-strength" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
            <p id="password-msg" class="auth-field-msg{{ errors.password is defined ? ' is-error' : '' }}" data-auth-msg="password"{% if errors.password is defined %} role="alert"{% endif %}
               data-auth-hint="{{ regleMdp }}" aria-live="polite">{{ errors.password|default(regleMdp) }}</p>
        </div>

        <div>
            <div class="chk-field">
                <input id="confirm_password" name="confirm_password" type="password" placeholder=" " autocomplete="new-password" required
                       aria-describedby="confirm_password-msg" class="{{ errors.confirm_password is defined ? 'invalid' : '' }}"{% if errors.confirm_password is defined %} aria-invalid="true"{% endif %}>
                <label for="confirm_password">Confirmer le mot de passe</label>
            </div>
            <p id="confirm_password-msg" class="auth-field-msg{{ errors.confirm_password is defined ? ' is-error' : '' }}" data-auth-msg="confirm_password"{% if errors.confirm_password is defined %} role="alert"{% endif %} aria-live="polite">{{ errors.confirm_password|default('') }}</p>
        </div>

        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

        {# Anti-bot : champ honeypot invisible #}
        <div style="position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;overflow:hidden;" aria-hidden="true" tabindex="-1">
            <label for="website_url">Ne pas remplir ce champ</label>
            <input type="text" name="website_url" id="website_url" value="" autocomplete="off" tabindex="-1">
        </div>

        <button class="nhp-btn nhp-btn--primary" type="submit">
            S'inscrire
            <svg class="nhp-btn-arrow" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
    </form>
{% endblock %}