{% extends 'vitrine/base.html.twig' %}
{% import 'vitrine/_icons.html.twig' as icons %}

{#
  Gabarit des pages de compte (connexion, inscription, mot de passe oublié et
  leurs écrans de confirmation). Formulaire à gauche, visuel de marque à droite
  (masqué sur téléphone : le formulaire passe avant tout).

  Blocs :
    auth_kicker   surtitre au-dessus du titre (facultatif)
    auth_heading  titre de la page (h1)
    auth_lead     phrase d'introduction (facultatif)
    auth_content  le formulaire ou le message
    auth_aside    le panneau de droite ; par défaut, la promesse izibrick
#}

{# La personne vient pour son compte, pas pour ouvrir un nouveau site. #}
{% block cta_banner %}{% endblock %}

{% block meta_description %}Accédez à votre espace izibrick pour créer et gérer votre site internet.{% endblock %}

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

{% block body %}
<section class="auth">
    <div class="auth__main">
        <div class="auth__panel">
            {% set kicker = block('auth_kicker') is defined ? block('auth_kicker')|trim : '' %}
            {% if kicker %}<span class="auth__kicker">{{ kicker|raw }}</span>{% endif %}
            <h1 class="auth__title">{% block auth_heading %}{% endblock %}</h1>
            {% set lead = block('auth_lead') is defined ? block('auth_lead')|trim : '' %}
            {% if lead %}<p class="auth__lead">{{ lead|raw }}</p>{% endif %}

            {# Messages laissés par une redirection (lien expiré, mot de passe changé,
               invitation acceptée…). L'ancien gabarit ne les affichait pas : ils se perdaient. #}
            {% for type, messages in app.flashes(['success', 'info', 'warning', 'error']) %}
                {% for message in messages %}
                    <div class="auth-alert auth-alert--{{ type }}" role="{{ type == 'error' ? 'alert' : 'status' }}">
                        {{ icons.icon(type == 'success' ? 'check-circle' : (type == 'info' ? 'info' : 'alert-triangle'), 20) }}
                        <div>{{ message }}</div>
                    </div>
                {% endfor %}
            {% endfor %}

            {% block auth_content %}{% endblock %}
        </div>
    </div>

    <aside class="auth__aside" aria-label="izibrick en bref">
        {% block auth_aside %}
            <img class="auth__photo" src="{{ asset('assets/vitrine/img/ambiances/hero.jpg') }}" alt="" width="1600" height="1200" decoding="async">
            <div class="auth__aside-body">
                <p class="auth__quote">Le beau site que votre activité mérite, <span>brique par brique.</span></p>
                <ul class="auth__points">
                    <li>{{ icons.icon('check', 18) }} Gratuit pour démarrer, sans carte bancaire</li>
                    <li>{{ icons.icon('check', 18) }} Hébergé en France, HTTPS inclus</li>
                    <li>{{ icons.icon('check', 18) }} Sans engagement</li>
                </ul>
            </div>
        {% endblock %}
    </aside>
</section>

<script>
    // Afficher / masquer un mot de passe : bouton [data-toggle-password="<id du champ>"]
    document.querySelectorAll('[data-toggle-password]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var input = document.getElementById(btn.getAttribute('data-toggle-password'));
            if (!input) return;
            var show = input.type === 'password';
            input.type = show ? 'text' : 'password';
            btn.setAttribute('aria-pressed', show ? 'true' : 'false');
            btn.setAttribute('aria-label', show ? 'Masquer le mot de passe' : 'Afficher le mot de passe');
        });
    });

    // Après un envoi refusé, on amène la personne sur le premier champ à corriger.
    var firstInvalid = document.querySelector('.auth [aria-invalid="true"]');
    if (firstInvalid) {
        firstInvalid.scrollIntoView({ block: 'center' });
        firstInvalid.focus({ preventScroll: true });
    }
</script>
{% endblock %}