<script lang="ts">
	import { pb } from '$lib/api';

	let email = '';
	let password = '';

	const handleLogin = async (event: Event) => {
		event.preventDefault();

		email = email.trim();
		password = password.trim();

		if (email && password) {
			const resp = await pb.collection('users').authWithPassword(email, password);
			console.log('Logged in:', resp);
		}
	};
</script>

<form class="login-container" on:submit={handleLogin}>
	<h1>Musceclat Login</h1>
	<div class="form-group">
		<label for="email">E-Mail:</label>
		<input
			type="email"
			id="email"
			name="email"
			placeholder="Enter your email"
			required
			bind:value={email}
		/>
	</div>
	<div class="form-group">
		<label for="password">Password:</label>
		<input
			type="password"
			id="password"
			name="password"
			placeholder="Enter your password"
			required
			bind:value={password}
		/>
	</div>
	<button type="submit">Login</button>
</form>

<style>
	.login-container {
		background-color: #ffffff;
		padding: 40px;
		border-radius: 8px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
		width: 100%;
		max-width: 400px;
	}

	.login-container h1 {
		font-size: 2em;
		color: #202020;
		margin-bottom: 20px;
		text-align: center;
	}

	.form-group {
		margin-bottom: 15px;
	}

	.form-group label {
		display: block;
		color: #606060;
		margin-bottom: 5px;
	}

	.form-group input {
		width: 100%;
		padding: 15px;
		border: none;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		font-size: 16px;
	}

	button {
		background-color: #0078d4;
		color: white;
		padding: 15px;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		font-size: 16px;
		width: 100%;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		transition: background-color 0.3s;
	}

	button:hover {
		background-color: #005ea6;
	}
</style>
