<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="/assets/fa/css/fontawesome.css">
    <title>Sign In</title>
    <style>
        body {
            background-color: #0f172a;
            background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
            background-attachment: fixed;
        }
    </style>
</head>
<body class="antialiased min-h-screen flex items-center justify-center p-4 text-gray-100">
    <div class="w-full max-w-md">
        <div class="bg-gray-800/80 backdrop-blur-lg shadow-2xl rounded-2xl overflow-hidden border border-white/10">
            <div class="p-8 sm:p-10">
                <div class="text-center mb-8">
                    <div class="flex justify-center mb-6">
                        <img src="/assets/img/logo.png" alt="Logo" class="h-20 w-auto">
                    </div>
                    <h3 class="text-3xl font-bold text-white tracking-tight">Paging Console</h3>
                    <p class="text-gray-400 mt-2">Please sign in to your account</p>
                </div>

                <% if (typeof error !== 'undefined' && error) { %>
                    <div class="bg-red-900/50 border-l-4 border-red-500 text-red-200 p-4 rounded-r mb-6 flex items-start gap-3" role="alert">
                        <i class="fa-solid fa-circle-exclamation mt-1"></i>
                        <div><%= error %></div>
                    </div>
                <% } %>

                <form novalidate class="space-y-6">
                    <div>
                        <label for="username" class="block text-sm font-semibold text-gray-300 mb-2">Username</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa-regular fa-user text-gray-500"></i>
                            </div>
                            <input id="username" name="username" type="text" class="block w-full pl-10 pr-3 py-3 border border-gray-600 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-gray-900/50 focus:bg-gray-900 text-white placeholder-gray-500" placeholder="Enter your username" required autofocus
                                value="<%= typeof username !== 'undefined' ? username : '' %>">
                        </div>
                    </div>

                    <div>
                        <label for="password" class="block text-sm font-semibold text-gray-300 mb-2">Password</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa-regular fa-lock text-gray-500"></i>
                            </div>
                            <input id="password" name="password" type="password" class="block w-full pl-10 pr-3 py-3 border border-gray-600 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-gray-900/50 focus:bg-gray-900 text-white placeholder-gray-500" placeholder="••••••••" required>
                        </div>
                    </div>

                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-600 rounded cursor-pointer bg-gray-700">
                            <label class="ml-2 block text-sm text-gray-400 cursor-pointer select-none" for="remember">Remember me</label>
                        </div>
                    </div>

                    <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-sm font-bold text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform transition-all hover:-translate-y-0.5 active:translate-y-0">
                        Sign in
                    </button>
                </form>

                <div class="mt-8 pt-6 border-t border-gray-700 text-xs text-gray-500 text-center space-y-2">
                    <p>This system is the property of the Riverside Swim Club and is intended for use by authorized users only.</p>
                    <p>All users should have no expectation of privacy while using this system. Activities may be monitored, recorded, and reviewed to ensure security and compliance.</p>
                    <p>Unauthorized access, misuse, or attempts to circumvent security controls are strictly prohibited and may result in disciplinary or legal action.</p>
                </div>
            </div>
        </div>
    </div>

	<script>
		document.querySelector('form').addEventListener('submit', function(event) {
			event.preventDefault();
			const username = document.getElementById('username').value;
			const password = document.getElementById('password').value;
			const remember = document.getElementById('remember').checked;

			fetch('/api/auth/login', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({ username, password, remember })
			})
			.then(response => response.json())
			.then(data => {
				const form = document.querySelector('form');
				// remove existing client-side alert if present
				const existing = document.querySelector('.client-error');
				if (existing) existing.remove();

				if (data && data.success) {
					window.location.href = '/';
					return;
				}

				const msg = (data && data.message) ? data.message : 'Sign in failed';
				const alert = document.createElement('div');
				alert.className = 'client-error bg-red-900/50 border-l-4 border-red-500 text-red-200 p-4 rounded-r mb-6 flex items-start gap-3';
				alert.setAttribute('role', 'alert');
				alert.innerHTML = '<i class="fa-solid fa-circle-exclamation mt-1"></i><div>' + msg + '</div>';

				form.parentNode.insertBefore(alert, form);
			})
			.catch(() => {
				const form = document.querySelector('form');
				const existing = document.querySelector('.client-error');
				if (existing) existing.remove();

				const alert = document.createElement('div');
				alert.className = 'client-error bg-red-900/50 border-l-4 border-red-500 text-red-200 p-4 rounded-r mb-6 flex items-start gap-3';
				alert.setAttribute('role', 'alert');
				alert.innerHTML = '<i class="fa-solid fa-circle-exclamation mt-1"></i><div>Network error. Please try again.</div>';

				form.parentNode.insertBefore(alert, form);
			});
		});
	</script>
</body>
</html>