<section class="flex flex-col gap-4">
    <div class="flex flex-col gap-2">
        <div class="flex flex-col gap-1 mb-4">
            <h3 class="text-2xl font-semibold">
                Check Your Email
            </h3>
            <p>
                We have sent a verification code to your email.
            </p>
            {% include 'lib/rule.twig' %}
        </div>
        {% include 'lib/alert.twig' %}

        <form action="/magic-link" method="post" class="flex flex-col items-center gap-4">
            {% include 'lib/inputs/text.twig' with { 
                type: 'tel', 
                name: 'code', 
                placeholder: '******', 
                class: 'code-input', 
                maxlength: 6, 
                inputmode: 'numeric', 
                pattern: '[0-9]*' 
            } %}
            {% include 'lib/buttons/submit.twig' with { 
                label: 'Verify Code', 
            } %}
        </form>
    </div>
</section>
