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

{#
    Connexion par code reçu par e-mail (LoginCodeController).
    Variables : step ('email' | 'code'), email, error, notice
#}

{% block title %}Connexion par code | Izibrick{% endblock %}

{% block auth_kicker %}Mon espace{% endblock %}
{% block auth_heading %}{{ step == 'code' ? 'Saisissez votre code' : 'Recevoir un code par e-mail' }}{% endblock %}
{% block auth_lead %}{{ step == 'code'
    ? 'Recopiez les 6 chiffres de l\'e-mail que nous venons de vous envoyer.'
    : 'Sans mot de passe : nous vous envoyons un code à 6 chiffres. Cet appareil restera connecté 30 jours.' }}{% endblock %}

{% block auth_content %}
<div class="auth-card">
    {% if error %}
        <div class="auth-alert auth-alert--error" role="alert">
            {{ icons.icon('alert-triangle', 20) }}
            <div>{{ error }}</div>
        </div>
    {% elseif notice %}
        <div class="auth-alert auth-alert--info" role="status">
            {{ icons.icon('info', 20) }}
            <div>{{ notice }}</div>
        </div>
    {% endif %}

    {% if step == 'code' %}
        <form action="{{ path('app_login_code') }}" method="post">
            <input type="hidden" name="email" value="{{ email }}">
            <input type="hidden" name="action" value="verify">
            <input type="hidden" name="_token" value="{{ csrf_token('login-code') }}">

            <div class="form-field">
                <label for="code" class="form-label">Code reçu par e-mail</label>
                <input type="text" id="code" name="code" class="form-input" inputmode="numeric"
                       autocomplete="one-time-code" pattern="[0-9 ]{6,7}" maxlength="7" placeholder="123456"
                       required autofocus {% if error %}aria-invalid="true"{% endif %}
                       style="font-size: 1.5rem; letter-spacing: .3em; text-align: center;">
            </div>

            <button type="submit" class="btn btn--primary btn--lg btn--block">
                Me connecter {{ icons.icon('arrow-right', 18) }}
            </button>
        </form>

        <form action="{{ path('app_login_code') }}" method="post" class="auth-row" style="margin-top: 1rem;">
            <input type="hidden" name="email" value="{{ email }}">
            <input type="hidden" name="_token" value="{{ csrf_token('login-code') }}">
            <span>Envoyé à <strong>{{ email }}</strong></span>
            <button type="submit" class="auth-link" style="background: none; border: 0; padding: 0; cursor: pointer;">Renvoyer un code</button>
        </form>
    {% else %}
        <form action="{{ path('app_login_code') }}" method="post">
            <input type="hidden" name="_token" value="{{ csrf_token('login-code') }}">
            <div class="form-field">
                <label for="email" class="form-label">Adresse e-mail</label>
                <input type="email" id="email" name="email" value="{{ email }}" class="form-input"
                       placeholder="vous@exemple.fr" autocomplete="email" required autofocus
                       {% if error %}aria-invalid="true"{% endif %}>
            </div>

            <button type="submit" class="btn btn--primary btn--lg btn--block">
                Recevoir mon code {{ icons.icon('arrow-right', 18) }}
            </button>
        </form>
    {% endif %}

    <div class="auth-or">ou</div>

    <p class="auth-switch">
        <a class="auth-link" href="{{ path('app_login') }}">Se connecter avec le mot de passe</a>
    </p>
</div>

<p class="auth-foot">{{ icons.icon('lock', 16) }} Connexion chiffrée (HTTPS)</p>
{% endblock %}