<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' %}
        <style>
        .code-input {
            font-size: 24px;
            font-family: monospace;
            text-align: left;
            letter-spacing: 1.15em;
            border: 2px solid #000;
            padding: 10px;
            width: 250px;
            outline: none;
            background: linear-gradient(
                90deg,
                white 0, white 36px, /* Box width */
                black 36px, black 38px /* Border between boxes */
            );
            background-size: 42px 100%; /* Adjust size to fit each character in a cell */
            background-clip: padding-box;
        }
    </style>

        <form action="/account/verify" method="post" class="flex flex-col items-center gap-4">
            <input type="tel" name="code" placeholder="******" class="code-input" maxlength="6" inputmode="numeric" pattern="[0-9]*">
                <script>
                document.addEventListener("DOMContentLoaded", function () {
                    const input = document.querySelector(".code-input");

                    input.addEventListener("input", function (e) {
                        // Remove any non-digit characters immediately
                        this.value = this.value.replace(/\D/g, "");
                        // Move the cursor back one space then blur when the 6th digit is entered
                        if (this.value.length === 6) {
                            this.setSelectionRange(this.value.length - 1, this.value.length - 1);
                            this.blur();
                        }
                    });

                    input.addEventListener("paste", function (e) {
                        e.preventDefault();
                        let pastedData = e.clipboardData.getData("text").replace(/\D/g, ""); // Allow only digits
                        this.value = pastedData.substring(0, this.maxLength);
                        // Clear focus if pasted data fills the input
                        if (this.value.length === 6) {
                            this.blur();
                        }
                    });

                    input.addEventListener("keypress", function (e) {
                        if (!/[0-9]/.test(e.key)) {
                            e.preventDefault(); // Block non-numeric input
                        }
                    });
                });
            </script>

                {% include 'lib/button.twig' with { 
                label: 'Verify Code', 
                onclick: 'this.parentNode.submit()', 
                captcha: true
            } %}
            </form>
        </div>
    </section>
    