<div class="ext-content" style="max-width:420px;margin:0 auto">
    <div style="text-align:center;margin-bottom:1.5rem">
        <div style="display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#ede9fe;margin-bottom:1rem">
            <svg viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" width="26" height="26">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                <path d="M7 11V7a5 5 0 0110 0v4"/>
            </svg>
        </div>
        <h2 class="ext-page-title" style="margin:0"><?= t('ext_mfa_title') ?></h2>
    </div>

    <?php if ($resent): ?>
    <div class="alert alert-success" style="margin-bottom:1rem">
        <?= t('ext_mfa_resent') ?>
    </div>
    <?php endif; ?>

    <?php if ($error): ?>
    <div class="alert alert-error" style="margin-bottom:1rem">
        <?= htmlspecialchars($error) ?>
    </div>
    <?php endif; ?>

    <form method="post" action="/ext/<?= htmlspecialchars($token) ?>/verify" autocomplete="off">
        <input type="hidden" name="ext_token" value="<?= htmlspecialchars($token) ?>">
        <input type="hidden" name="action" value="verify_code">

        <div class="form-group" style="margin-bottom:1.25rem">
            <label class="form-label" for="mfa_code"><?= t('email_mfa_code_label') ?></label>
            <input
                type="text"
                id="mfa_code"
                name="mfa_code"
                class="form-input"
                inputmode="numeric"
                pattern="[0-9]{6}"
                maxlength="6"
                autocomplete="one-time-code"
                autofocus
                placeholder="123456"
                style="font-size:1.5rem;letter-spacing:.3em;text-align:center"
                data-input="mfaCodeAutoSubmit"
            >
        </div>

        <button type="submit" class="btn btn-primary" style="width:100%">
            <?= t('email_mfa_submit') ?>
        </button>
    </form>

    <form method="post" action="/ext/<?= htmlspecialchars($token) ?>/verify" style="margin-top:.75rem;text-align:center">
        <input type="hidden" name="ext_token" value="<?= htmlspecialchars($token) ?>">
        <input type="hidden" name="action" value="resend_code">
        <button type="submit" class="btn btn-ghost" style="font-size:.875rem">
            <?= t('email_mfa_resend') ?>
        </button>
    </form>
</div>
<script nonce="<?= csp_nonce() ?>">
function mfaCodeAutoSubmit(el) {
    const digits = el.value.replace(/\D/g, '');
    if (digits.length === 6) {
        el.value = digits;
        el.form.submit();
    }
}
</script>
