<?= $this->extend('layouts/guest') ?>

<?= $this->section('content') ?>
<?php
$remaining = (int) ($resendRemaining ?? 0);
$masked    = $maskedEmail ?? 'your email';
?>
<div class="auth-screen">
    <?php if (! empty($showSentBanner)): ?>
        <div class="toast-success" role="status">
            <strong>OTP Sent Successfully</strong>
            <p>An OTP has been sent to <?= esc($masked) ?> for verification.</p>
        </div>
    <?php endif; ?>

    <div class="auth-hero" aria-hidden="true">
        <svg viewBox="0 0 280 160" class="auth-hero-svg">
            <circle cx="70" cy="80" r="28" fill="#fff" stroke="#fb8c00" stroke-width="3"/>
            <rect x="62" y="68" width="16" height="20" rx="3" fill="none" stroke="#111" stroke-width="2"/>
            <path d="M66 68v-4a4 4 0 0 1 8 0v4" fill="none" stroke="#111" stroke-width="2"/>
            <circle cx="150" cy="90" r="26" fill="#fff" stroke="#111" stroke-width="2"/>
            <rect x="190" y="40" width="60" height="80" rx="8" fill="#fff" stroke="#111" stroke-width="2"/>
        </svg>
    </div>

    <a class="back-inline" href="<?= site_url('sign-in') ?>" aria-label="Back"></a>
    <h1 class="auth-title">OTP Verification</h1>
    <p class="otp-email-hint">Enter the code sent to <?= esc($masked) ?></p>

    <form class="auth-form" method="post" action="<?= site_url('auth/verify-otp') ?>" id="otp-form">
        <?= csrf_field() ?>
        <label class="field-label">Enter OTP</label>
        <div class="otp-boxes" data-otp-boxes>
            <?php for ($i = 0; $i < 6; $i++): ?>
                <input class="otp-box" type="text" inputmode="numeric" maxlength="1" autocomplete="<?= $i === 0 ? 'one-time-code' : 'off' ?>" aria-label="Digit <?= $i + 1 ?>" required>
            <?php endfor; ?>
        </div>
        <input type="hidden" name="otp" id="otp-value" value="">
        <p class="resend-row" data-resend-row data-remaining="<?= $remaining ?>">
            Didn't receive the OTP?
            <button class="text-link-btn" type="submit" form="resend-form" id="resend-btn" <?= $remaining > 0 ? 'disabled' : '' ?>>Resend OTP</button>
            <span class="resend-countdown" id="resend-countdown" <?= $remaining > 0 ? '' : 'hidden' ?>>Resend OTP in <span id="resend-timer">00:00</span></span>
        </p>
        <button class="btn-primary" type="submit">Continue</button>
    </form>

    <form id="resend-form" method="post" action="<?= site_url('auth/resend-otp') ?>" hidden>
        <?= csrf_field() ?>
    </form>
</div>
<?= $this->endSection() ?>
