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

{% block title %}Registrati gratis — Mostry{% endblock %}

{% block javascripts %}{{ parent() }}
    <script>
        // Stati del "caricamento" della verifica anti-bot (widget invisibile).
        function mostrySecState(state, testo) {
            var el = document.getElementById('seccheck');
            if (!el) return;
            el.classList.remove('seccheck--ok', 'seccheck--err');
            if (state) el.classList.add('seccheck--' + state);
            var t = el.querySelector('.seccheck__txt');
            if (t && testo) t.textContent = testo;
        }
        function mostryTurnstileOk()   { mostrySecState('ok',  'Verifica completata'); }
        function mostryTurnstileErr()  { mostrySecState('err', 'Verifica non riuscita, ricarica la pagina'); }
        function mostryTurnstileWait() { mostrySecState('',    'Verifica di sicurezza in corso…'); }
    </script>
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>{% endblock %}

{% block body %}
    <div class="auth">
        <div class="auth__card">
            <div class="auth__logo">
                <a href="{{ path('home') }}"><img src="{{ asset('img/logo.png') }}" alt="Mostry"></a>
            </div>

            <h1>Crea il tuo account</h1>
            <p class="auth__sub">
                L'iscrizione è gratuita: entri, guardi com'è fatta la piattaforma e costruisci il tuo
                assistente. Paghi solo quando decidi di metterlo online.
            </p>

            {{ include('_flashes.html.twig') }}

            {{ form_start(form) }}
                <div class="grid grid--2" style="gap:14px">
                    <div class="field">
                        {{ form_label(form.firstName) }}
                        {{ form_widget(form.firstName) }}
                        <div class="field__error">{{ form_errors(form.firstName) }}</div>
                    </div>
                    <div class="field">
                        {{ form_label(form.lastName) }}
                        {{ form_widget(form.lastName) }}
                        <div class="field__error">{{ form_errors(form.lastName) }}</div>
                    </div>
                </div>

                <div class="field">
                    {{ form_label(form.company) }}
                    {{ form_widget(form.company) }}
                </div>

                <div class="field">
                    {{ form_label(form.email) }}
                    {{ form_widget(form.email) }}
                    <div class="field__error">{{ form_errors(form.email) }}</div>
                </div>

                <div class="field">
                    {{ form_label(form.plainPassword) }}
                    {{ form_widget(form.plainPassword) }}
                    <div class="field__error">{{ form_errors(form.plainPassword) }}</div>
                    <p style="margin-top:6px;font-size:.82rem;color:var(--faint)">Almeno 8 caratteri.</p>
                </div>

                <div class="field">
                    {# Verifica anti-bot: il widget resta invisibile e si mostra un caricamento.
                       Compare la sfida solo se Cloudflare la ritiene necessaria. #}
                    <div class="seccheck" id="seccheck" aria-live="polite">
                        <span class="seccheck__icon"><i class="fa-solid fa-shield-halved"></i></span>
                        <span class="seccheck__txt">Verifica di sicurezza in corso…</span>
                    </div>
                    <div class="cf-turnstile"
                         data-sitekey="{{ turnstile_site_key }}"
                         data-theme="dark"
                         data-appearance="interaction-only"
                         data-callback="mostryTurnstileOk"
                         data-error-callback="mostryTurnstileErr"
                         data-expired-callback="mostryTurnstileWait"></div>
                </div>

                <div class="field">
                    <button class="btn btn--block" type="submit">
                        <i class="fa-solid fa-user-plus"></i> Crea account gratuito
                    </button>
                </div>
            {{ form_end(form) }}

            <p class="auth__foot">Hai già un account? <a href="{{ path('login') }}">Accedi</a></p>
            <p class="auth__foot" style="margin-top:8px">
                Vuoi solo provare il bot? <a href="{{ path('trial') }}">Prova gratis senza registrarti</a>
            </p>
        </div>
    </div>
{% endblock %}