<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">
            <rect x="5" y="11" width="14" height="10" rx="2"/>
            <path d="M8 11V7a4 4 0 018 0v4"/>
            <circle cx="12" cy="16" r="1" fill="currentColor"/>
        </svg>
    </div>
    <h1 class="auth-title"><?= t('totp_verify_title') ?></h1>
    <p class="auth-subtitle"><?= t('totp_verify_subtitle') ?></p>

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

    <form method="POST" action="/totp-verify" class="auth-form" autocomplete="off">
        <?= Helper::csrf() ?>
        <div class="form-group">
            <label for="code" class="form-label"><?= t('totp_code') ?></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('totp_verify_btn') ?></button>
        <a href="/login" class="totp-back-link"><?= t('back') ?> <?= t('login') ?></a>
    </form>
</div>
<script nonce="<?= csp_nonce() ?>">
// Auto-submit when 6 digits entered
document.getElementById('code').addEventListener('input', function() {
    if (this.value.replace(/\D/g,'').length === 6) {
        this.value = this.value.replace(/\D/g,'');
        this.form.submit();
    }
});
// Only allow digits
document.getElementById('code').addEventListener('keypress', function(e) {
    if (!/\d/.test(e.key)) e.preventDefault();
});
</script>
