<div class="auth-content">
    <div class="auth-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="40" height="40">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
            <polyline points="22,6 12,13 2,6"/>
        </svg>
    </div>
    <h1 class="auth-title"><?= t('email_mfa_title') ?></h1>
    <p class="auth-subtitle"><?= t('email_mfa_desc') ?></p>

    <?php if (!empty($error)): ?>
    <div class="alert alert-error"><?= Helper::e($error) ?></div>
    <?php endif; ?>
    <?php if (!empty($success)): ?>
    <div class="alert alert-success"><?= Helper::e($success) ?></div>
    <?php endif; ?>

    <form method="POST" action="/email-mfa-verify" class="auth-form" autocomplete="off">
        <?= Helper::csrf() ?>
        <div class="form-group">
            <label for="code" class="form-label"><?= t('email_mfa_code_label') ?></label>
            <input type="text" id="code" name="code" class="form-input totp-input"
                   required autofocus maxlength="6" pattern="\d{6}"
                   inputmode="numeric" autocomplete="one-time-code"
                   placeholder="000000">
        </div>
        <button type="submit" class="btn btn-primary btn-block"><?= t('email_mfa_submit') ?></button>
    </form>

    <form method="POST" action="/email-mfa-verify" style="margin-top:.75rem">
        <?= Helper::csrf() ?>
        <input type="hidden" name="action" value="resend">
        <button type="submit" class="btn btn-ghost btn-sm btn-block"><?= t('email_mfa_resend') ?></button>
    </form>

    <a href="/login" class="totp-back-link"><?= t('back') ?> <?= t('login') ?></a>
</div>
<script nonce="<?= csp_nonce() ?>">
document.getElementById('code').addEventListener('input', function() {
    if (this.value.replace(/\D/g,'').length === 6) {
        this.value = this.value.replace(/\D/g,'');
        this.form.submit();
    }
});
document.getElementById('code').addEventListener('keypress', function(e) {
    if (!/\d/.test(e.key)) e.preventDefault();
});
</script>
