package pages

import "git.ma-al.com/goc_marek/zfs/internal/server/templates/components"

// LoginPage renders the login page
templ LoginPage() {
	@components.Layout("Admin Login", "") {
		<div class="min-h-screen flex items-center justify-center px-4">
			<div class="w-full max-w-md">
				<!-- Logo and Title -->
				<div class="text-center mb-10">
					<div class="relative inline-block mb-6">
						<div class="w-20 h-20 bg-gradient-to-br from-violet-500 via-purple-500 to-fuchsia-500 rounded-3xl flex items-center justify-center shadow-2xl shadow-violet-500/30 animate-float">
							<i class="fas fa-database text-white text-3xl"></i>
						</div>
						<div class="absolute -bottom-1 -right-1 w-6 h-6 bg-emerald-400 rounded-full border-4 border-white dark:border-slate-950 animate-pulse"></div>
					</div>
					<h1 class="text-3xl font-bold text-slate-900 dark:text-white mb-3">ZFS Backup Admin</h1>
					<p class="text-slate-500 dark:text-slate-400 font-medium">Sign in to manage your backups</p>
				</div>
				
				<!-- Login Form -->
				<div class="bg-white/90 dark:bg-slate-900/80 backdrop-blur-xl rounded-3xl border border-slate-200 dark:border-slate-700/50 p-8 shadow-xl dark:shadow-none transition-colors duration-300">
					<form id="login-form">
						@components.FormInput("username", "Username", "text", "", true)
						@components.FormInput("password", "Password", "password", "", true)
						<button 
							type="submit" 
							class="w-full mt-4 px-4 py-4 bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40 font-semibold text-lg"
						>
							<i class="fas fa-sign-in-alt"></i>
							Sign In
						</button>
					</form>
					
					<div class="mt-8 pt-6 border-t border-slate-200 dark:border-slate-700/50 text-center">
						<p class="text-slate-500 dark:text-slate-500 text-sm flex items-center justify-center gap-2">
							<i class="fas fa-info-circle text-violet-500 dark:text-violet-400"></i>
							Default: <span class="text-slate-700 dark:text-slate-300 font-mono bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded">admin / admin123</span>
						</p>
					</div>
				</div>
				
				<!-- Footer -->
				<p class="text-center text-slate-400 dark:text-slate-600 text-xs mt-10 flex items-center justify-center gap-2">
					<i class="fas fa-shield-halved text-violet-400 dark:text-violet-500/50"></i>
					Powered by ZFS Backup System
				</p>
			</div>
		</div>
		<script src="/admin/static/login.js"></script>
	}
}