package views

templ LoginPage(errorMsg string) {
	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Login - Nerd Monitor</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			body {
				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
				background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
				color: #e2e8f0;
				min-height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.login-container {
				width: 100%;
				max-width: 400px;
				padding: 2rem;
			}
			
			.login-card {
				background-color: #1e293b;
				border: 1px solid #334155;
				border-radius: 0.5rem;
				padding: 2rem;
				box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
			}
			
			h1 {
				font-size: 1.875rem;
				font-weight: 600;
				margin-bottom: 0.5rem;
				text-align: center;
			}
			
			.subtitle {
				text-align: center;
				color: #94a3b8;
				margin-bottom: 2rem;
				font-size: 0.875rem;
			}
			
			.form-group {
				margin-bottom: 1.5rem;
			}
			
			label {
				display: block;
				margin-bottom: 0.5rem;
				font-weight: 500;
				color: #e2e8f0;
				font-size: 0.875rem;
			}
			
			input {
				width: 100%;
				padding: 0.75rem;
				background-color: #0f172a;
				border: 1px solid #334155;
				border-radius: 0.375rem;
				color: #e2e8f0;
				font-size: 1rem;
				transition: border-color 0.2s;
			}
			
			input:focus {
				outline: none;
				border-color: #3b82f6;
				box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
			}
			
			.btn-login {
				width: 100%;
				padding: 0.75rem;
				background-color: #3b82f6;
				color: #ffffff;
				border: none;
				border-radius: 0.375rem;
				font-size: 1rem;
				font-weight: 600;
				cursor: pointer;
				transition: background-color 0.2s;
			}
			
			.btn-login:hover {
				background-color: #2563eb;
			}
			
			.error {
				background-color: #7c2d12;
				border: 1px solid #dc2626;
				color: #fed7aa;
				padding: 1rem;
				border-radius: 0.375rem;
				margin-bottom: 1.5rem;
				font-size: 0.875rem;
			}
			
			.info {
				background-color: #0c4a6e;
				border: 1px solid #3b82f6;
				color: #bfdbfe;
				padding: 1rem;
				border-radius: 0.375rem;
				margin-bottom: 1.5rem;
				font-size: 0.875rem;
			}
		</style>
	</head>
	<body>
		<div class="login-container">
			<div class="login-card">
				<h1>Nerd Monitor</h1>
				<p class="subtitle">System Monitoring Dashboard</p>
				
				if errorMsg != "" {
					<div class="error">{ errorMsg }</div>
				}
				
				<div class="info">
					<strong>Demo Credentials:</strong><br/>
					Username: <code>admin</code><br/>
					Password: <code>admin</code>
				</div>
				
				<form method="POST" action="/login">
					<div class="form-group">
						<label for="username">Username</label>
						<input type="text" id="username" name="username" required autofocus />
					</div>
					<div class="form-group">
						<label for="password">Password</label>
						<input type="password" id="password" name="password" required />
					</div>
					<button type="submit" class="btn-login">Sign In</button>
				</form>
			</div>
		</div>
	</body>
	</html>
}
