<?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="text-center mb-8">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Welcome Back</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Please enter your credentials to log in.</p>
        </div>

        <form action="<?php echo URLROOT; ?>/users/login" method="POST" class="space-y-5">
            <?php echo csrfField(); ?>
            
            <div>
                <label for="email" class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Email Address</label>
                <input type="email" name="email" class="w-full px-4 py-2.5 rounded-lg border <?php echo (!empty($data['email_err'])) ? 'border-red-500' : '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 transition-colors" value="<?php echo $data['email']; ?>" autofocus>
                <span class="text-xs text-red-500 mt-1 block"><?php echo $data['email_err']; ?></span>
            </div>
            
            <div>
                <div class="flex justify-between items-center mb-2">
                    <label for="password" class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider">Password</label>
                    <a href="<?php echo URLROOT; ?>/users/forgotPassword" class="text-[10px] text-primary hover:underline font-bold uppercase tracking-wider">Forgot Password?</a>
                </div>
                <input type="password" name="password" class="w-full px-4 py-2.5 rounded-lg border <?php echo (!empty($data['password_err'])) ? 'border-red-500' : '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 transition-colors" value="<?php echo $data['password']; ?>">
                <span class="text-xs text-red-500 mt-1 block"><?php echo $data['password_err']; ?></span>
            </div>

            <div class="flex items-center pt-2">
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="remember_me" value="1" class="sr-only peer">
                    <div class="w-9 h-5 bg-gray-300 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-400 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
                    <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">Keep me logged in</span>
                </label>
            </div>
            
            <div class="pt-4 flex flex-col space-y-4">
                <button type="submit" class="w-full bg-primary hover:opacity-90 text-white font-bold py-2.5 px-6 rounded-lg transition-all focus:ring-4 focus:ring-primary/50 shadow-sm">
                    Login to Portal
                </button>
                <div class="text-center">
                    <a href="<?php echo URLROOT; ?>/users/register" class="text-sm text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary font-medium transition-colors">
                        Don't have an account? <span class="font-bold">Register</span>
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
<?php require APPROOT . '/app/Views/layouts/footer.php'; ?>