<script lang="ts">
    import type { PageProps } from "./$types";
	import { enhance } from "$app/forms";

	let { form }: PageProps = $props();

</script>

<div>
	<h1>Login</h1>
	<form id="login" method="POST" action="?/login" use:enhance={({formElement}) => { formElement.reset() }}>
		<table>
			<tbody>
				<tr>
					<td><label for="username">Benutzername:</label></td>
					<td><input type="text" id="username" name="username" value={form?.username ?? ""} required /></td>
				</tr>
				<tr>
					<td><label for="password">Passwort:</label></td>
					<td><input type="password" id="password" name="password" required /></td> <!-- form.password should never be defined -->
				</tr>
				<tr>
					<td colspan="2"><button type="submit">Login</button></td>
				</tr>
			</tbody>
		</table>
	</form>
	<p>{form?.message}<br></p>
</div>

<style>
	div {
		position: absolute;
		top: 33%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	table {
		margin: auto;
	}
	tr td:first-of-type {
		padding-right: 10px;
	}

	button {
		margin: 0 auto;
		padding: 0 auto;		
	}

</style>
