{% extends "base.html" %}

{% block title %}Superadmin Login - Savly{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center p-4">
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 20% 20%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);"></div>
    </div>
    
    <div class="w-full max-w-6xl relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
            <!-- Left Side - Illustration -->
            <div class="hidden lg:block">
                <div class="text-center space-y-6">
                    <div class="relative">
                        <!-- Main Control Panel -->
                        <div class="w-96 h-72 bg-white/10 backdrop-blur-lg rounded-3xl border border-white/20 shadow-2xl p-6 mx-auto">
                            <!-- Header -->
                            <div class="flex items-center space-x-3 mb-6">
                                <div class="w-10 h-10 bg-gradient-to-r from-red-500 to-pink-600 rounded-xl flex items-center justify-center">
                                    <i class="fas fa-crown text-white"></i>
                                </div>
                                <div>
                                    <div class="text-white font-bold">System Control Panel</div>
                                    <div class="text-purple-200 text-xs">Master Admin Access</div>
                                </div>
                            </div>
                            
                            <!-- Control Grid -->
                            <div class="grid grid-cols-3 gap-3">
                                <!-- System Status -->
                                <div class="col-span-3 bg-white/5 rounded-xl p-3 mb-2">
                                    <div class="flex items-center justify-between">
                                        <span class="text-white text-sm font-semibold">System Status</span>
                                        <div class="flex items-center space-x-1">
                                            <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                                            <span class="text-green-400 text-xs">Operational</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Control Buttons -->
                                <div class="bg-blue-500/20 rounded-xl p-3 text-center">
                                    <i class="fas fa-users text-blue-400 text-lg mb-1"></i>
                                    <div class="text-white text-xs font-semibold">Users</div>
                                    <div class="text-blue-200 text-xs">23</div>
                                </div>
                                <div class="bg-green-500/20 rounded-xl p-3 text-center">
                                    <i class="fas fa-database text-green-400 text-lg mb-1"></i>
                                    <div class="text-white text-xs font-semibold">Database</div>
                                    <div class="text-green-200 text-xs">Active</div>
                                </div>
                                <div class="bg-purple-500/20 rounded-xl p-3 text-center">
                                    <i class="fas fa-shield-alt text-purple-400 text-lg mb-1"></i>
                                    <div class="text-white text-xs font-semibold">Security</div>
                                    <div class="text-purple-200 text-xs">Secure</div>
                                </div>
                                <div class="bg-orange-500/20 rounded-xl p-3 text-center">
                                    <i class="fas fa-chart-bar text-orange-400 text-lg mb-1"></i>
                                    <div class="text-white text-xs font-semibold">Analytics</div>
                                    <div class="text-orange-200 text-xs">Live</div>
                                </div>
                                <div class="bg-pink-500/20 rounded-xl p-3 text-center">
                                    <i class="fas fa-cog text-pink-400 text-lg mb-1"></i>
                                    <div class="text-white text-xs font-semibold">System</div>
                                    <div class="text-pink-200 text-xs">Optimal</div>
                                </div>
                                <div class="bg-red-500/20 rounded-xl p-3 text-center">
                                    <i class="fas fa-backup text-red-400 text-lg mb-1"></i>
                                    <div class="text-white text-xs font-semibold">Backup</div>
                                    <div class="text-red-200 text-xs">Ready</div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Floating Security Badge -->
                        <div class="absolute -top-4 -right-4 w-16 h-16 bg-gradient-to-r from-red-500 to-pink-600 rounded-full flex items-center justify-center animate-pulse shadow-xl">
                            <i class="fas fa-crown text-white text-xl"></i>
                        </div>
                        
                        <!-- Floating System Stats -->
                        <div class="absolute -bottom-4 -left-4 w-28 h-16 bg-white/10 backdrop-blur-lg rounded-xl border border-white/20 p-2 animate-float">
                            <div class="text-xs text-purple-200">Server Uptime</div>
                            <div class="text-lg font-bold text-white">99.9%</div>
                        </div>
                    </div>
                    
                    <div class="space-y-4">
                        <h1 class="text-4xl font-black text-white">
                            Master Control
                            <span class="block text-transparent bg-gradient-to-r from-red-400 to-pink-400 bg-clip-text">Access Panel</span>
                        </h1>
                        <p class="text-purple-200 text-lg leading-relaxed max-w-lg mx-auto">
                            Complete system administration with advanced user management, analytics, and security controls.
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- Right Side - Login Form -->
            <div class="w-full max-w-md mx-auto">
                <div class="bg-white/10 backdrop-blur-lg rounded-3xl shadow-2xl border border-white/20 p-8">
                    <!-- Header -->
                    <div class="text-center mb-8">
                        <div class="flex items-center justify-center mb-4">
                            <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-pink-600 rounded-2xl flex items-center justify-center shadow-xl">
                                <i class="fas fa-crown text-white text-2xl"></i>
                            </div>
                        </div>
                        <h2 class="text-3xl font-black text-white mb-2">Superadmin Login</h2>
                        <p class="text-purple-200">Master system administration access</p>
                    </div>
                    
                    <!-- Login Form -->
                    <form method="POST" class="space-y-6">
                        <div>
                            <label for="username" class="block text-sm font-semibold text-purple-200 mb-2">
                                <i class="fas fa-user-shield mr-2"></i>
                                Superadmin Username
                            </label>
                            <input type="text" 
                                   id="username" 
                                   name="username" 
                                   required
                                   class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all duration-200"
                                   placeholder="Enter superadmin username">
                        </div>
                        
                        <div>
                            <label for="password" class="block text-sm font-semibold text-purple-200 mb-2">
                                <i class="fas fa-lock mr-2"></i>
                                Master Password
                            </label>
                            <input type="password" 
                                   id="password" 
                                   name="password" 
                                   required
                                   class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all duration-200"
                                   placeholder="Enter master password">
                        </div>
                        
                        <button type="submit" 
                                class="w-full bg-gradient-to-r from-red-500 to-pink-600 text-white font-bold py-3 px-6 rounded-xl hover:from-red-600 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-purple-900 transition-all duration-200 shadow-xl hover:shadow-2xl transform hover:-translate-y-0.5">
                            <i class="fas fa-sign-in-alt mr-2"></i>
                            Access Control Panel
                        </button>
                    </form>
                    
                    <!-- Security Notice -->
                    <div class="mt-6 p-4 bg-red-500/10 border border-red-500/20 rounded-xl">
                        <div class="flex items-center text-red-300 text-sm">
                            <i class="fas fa-shield-alt mr-2"></i>
                            <span class="font-semibold">Secure Access:</span>
                            <span class="ml-1">All activities are monitored and logged</span>
                        </div>
                    </div>
                    
                    <!-- Navigation -->
                    <div class="mt-8 text-center space-y-4">
                        <div class="text-purple-300 text-sm">
                            <span class="px-4 bg-purple-900/30 text-purple-200 font-medium rounded-full py-1">Need access to other portals?</span>
                        </div>
                    </div>

                    <div class="mt-6 grid grid-cols-2 gap-3">
                        <button onclick="window.location.href='/'" 
                               style="position: relative; z-index: 50; cursor: pointer;"
                               class="inline-flex justify-center py-3 px-4 border border-white/20 rounded-xl shadow-sm bg-white/5 text-sm font-semibold text-purple-200 hover:bg-white/10 hover:border-white/30 transition-all duration-200">
                            <i class="fas fa-arrow-left mr-2 h-4 w-4"></i>
                            Home
                        </button>
                        <button onclick="window.location.href='/admin/login'" 
                               style="position: relative; z-index: 50; cursor: pointer;"
                               class="inline-flex justify-center py-3 px-4 border border-white/20 rounded-xl shadow-sm bg-white/5 text-sm font-semibold text-purple-200 hover:bg-white/10 hover:border-white/30 transition-all duration-200">
                            <i class="fas fa-user-shield mr-2 h-4 w-4"></i>
                            Admin
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}