{{ define "content" }}
<div class="max-w-2xl mx-auto">
    <h1 class="text-3xl font-bold mb-6">MFA Setup</h1>
    <div class="bg-gray-800 p-6 rounded space-y-4">
        <div>
            <p class="text-sm text-gray-400 mb-2"><strong>MFA Secret:</strong></p>
            <p class="bg-gray-900 p-3 rounded font-mono text-sm text-green-400 break-all">{{ .PageData.MFASecret }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-400 mb-2"><strong>OTP URL:</strong></p>
            <p class="bg-gray-900 p-3 rounded font-mono text-xs text-green-400 break-all">{{ .PageData.OTPURL }}</p>
        </div>
        <div class="mt-6 p-4 bg-gray-700 rounded">
            <p class="text-sm text-gray-300"><strong>Instructions:</strong></p>
            <ul class="text-sm text-gray-400 mt-2 space-y-1">
                <li>• Use a QR code scanner with the OTP URL above</li>
                <li>• Or manually enter the MFA Secret in your authenticator app</li>
                <li>• Supported apps: Google Authenticator, Authy, Microsoft Authenticator, etc.</li>
            </ul>
        </div>
    </div>
</div>
{{ end }}