{% extends 'base.html.twig' %}
{% block title %}{{ 'collect.sec.emailCode'|trans }}{% endblock %}
{% block footer %}{% endblock %}
{% block body %}
<div class="sign-guest" style="max-width:420px;margin:40px auto">
    <h1 class="sign-guest__title">{{ collection.title }}</h1>
    <p class="sign-help">{{ 'collect.guest.authHelp'|trans }}</p>

    <form method="post" class="mb-3">
        <input type="hidden" name="action" value="send">
        <label class="form-label" for="collectGuestEmail">{{ 'collect.guest.email'|trans }}</label>
        <input id="collectGuestEmail" class="form-control mb-2" type="email" name="email" value="{{ emailHint }}" required{% if codeRequested %} readonly{% endif %}>
        {% if codeRequested %}
            <p class="collect-auth-status" role="status">
                <span class="collect-auth-status__icon" aria-hidden="true">✓</span>
                {{ 'collect.guest.codeSentTo'|trans({'%email%': emailHint}) }}
            </p>
            <button class="button" type="submit">{{ 'collect.guest.resendCode'|trans }}</button>
        {% else %}
            <button class="button" type="submit">{{ 'collect.guest.sendCode'|trans }}</button>
        {% endif %}
    </form>

    {% if codeRequested %}
        <form method="post">
            <input type="hidden" name="action" value="verify">
            <label class="form-label" for="collectGuestCode">{{ 'collect.guest.code'|trans }}</label>
            <input id="collectGuestCode" class="form-control mb-2" type="text" name="code" inputmode="numeric" autocomplete="one-time-code" required autofocus>
            <button class="button button-blue" type="submit">{{ 'collect.continue'|trans }}</button>
        </form>
    {% endif %}
</div>
{% endblock %}