<?php require APPROOT . '/app/Views/layouts/header.php'; ?>
<div class="max-w-md mx-auto mt-10 mb-10">
    <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-blue-500"></div>

        <div class="flex justify-center mb-6">
            <div class="w-16 h-16 bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 rounded-2xl flex items-center justify-center shadow-inner border border-blue-100 dark:border-blue-800/30">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
            </div>
        </div>
        
        <div class="text-center mb-8">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Two-Factor Auth</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Open your Authenticator app and enter the 6-digit code to continue.</p>
        </div>
        
        <form action="<?php echo URLROOT; ?>/users/verify2fa" method="POST" class="space-y-6">
            <?php echo csrfField(); ?>
            
            <div>
                <input type="text" name="auth_code" class="w-full px-4 py-4 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:outline-none text-center text-2xl tracking-[0.3em] font-mono uppercase transition-colors shadow-inner" placeholder="000000" autocomplete="one-time-code" required autofocus>
                <p class="text-[10px] text-center text-gray-500 dark:text-gray-400 mt-4 uppercase tracking-wider font-bold">Lost your device? Enter an 8-character Backup Code.</p>
            </div>
            
            <div class="pt-2 flex flex-col space-y-4">
                <button type="submit" class="w-full bg-primary hover:opacity-90 text-white font-bold py-3 px-6 rounded-lg transition-all focus:ring-4 focus:ring-primary/50 shadow-sm flex justify-center items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    Verify & Login
                </button>
                <div class="text-center">
                    <a href="<?php echo URLROOT; ?>/users/logout" class="text-sm text-gray-500 hover:text-red-500 dark:hover:text-red-400 font-bold transition-colors">Cancel Login</a>
                </div>
            </div>
        </form>
    </div>
</div>
<?php require APPROOT . '/app/Views/layouts/footer.php'; ?>