<div class="auth-content" style="max-width:420px">
    <div class="auth-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="40" height="40">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
    </div>
    <h1 class="auth-title"><?= t('mfa_choice_title') ?></h1>
    <p class="auth-subtitle"><?= t('mfa_choice_desc') ?></p>

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

    <div style="display:flex;flex-direction:column;gap:12px;margin-top:1.5rem">

        <!-- TOTP option -->
        <form method="POST">
            <?= Helper::csrf() ?>
            <input type="hidden" name="method" value="totp">
            <button type="submit" class="btn btn-primary btn-block" style="justify-content:flex-start;gap:12px;padding:14px 18px;height:auto">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
                    <rect x="5" y="11" width="14" height="10" rx="2"/>
                    <path d="M8 11V7a4 4 0 018 0v4"/>
                </svg>
                <div style="text-align:left;white-space:normal">
                    <div style="font-weight:700;font-size:.95rem"><?= t('mfa_choice_totp_title') ?></div>
                    <div style="font-size:.8rem;opacity:.8;font-weight:400"><?= t('mfa_choice_totp_desc') ?></div>
                </div>
            </button>
        </form>

        <!-- Email option -->
        <form method="POST">
            <?= Helper::csrf() ?>
            <input type="hidden" name="method" value="email">
            <button type="submit" class="btn btn-secondary btn-block" style="justify-content:flex-start;gap:12px;padding:14px 18px;height:auto">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
                    <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 style="text-align:left;white-space:normal">
                    <div style="font-weight:700;font-size:.95rem"><?= t('mfa_choice_email_title') ?></div>
                    <div style="font-size:.8rem;opacity:.8;font-weight:400"><?= t('mfa_choice_email_desc') ?></div>
                </div>
            </button>
        </form>
    </div>

    <a href="/login" class="totp-back-link"><?= t('back') ?> <?= t('login') ?></a>
</div>
