<script lang="ts">

</script>

<form action="?/login" method="POST" id="form_login"></form>

<div class="container">
		
	<div class="grid">
		<h1>Login</h1>
		<label for="username">E-Mail: </label><input type="text" id="username" form="form_login" name="email" />
		<label for="password">Passwort: </label><input type="password" id="password" form="form_login" name="password" />
		<button type="submit" form="form_login">-></button>
	</div>

	<p><a href="/login/register">Noch nicht registriert? Klicke hier!</a></p>

</div>

<style>

	.container {
		display: flex;
		width: 100%;
		height: 100%;

		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.grid {
		display: grid;
		gap: 10px 50px;
		grid-template-columns: 1fr 3fr;
		justify-content: space-between;
	}

	.grid > h1 {
		width: 100%;
		text-align: center;
		grid-column: 1 / span 2;
	}

	.grid > button {
		width: 50%;
		margin-top: 10px;
		margin-left: auto;
		grid-column: 2;
	}

</style>
