<script lang="ts">
	import { auth } from '$lib/client/stores/auth';
</script>

<div class="flex min-h-dvh flex-col justify-center px-6 lg:px-8">

	<h2 class="mt-20 mb-10 text-center text-2xl font-semibold leading-9 text-gray-900">Sign in to your account</h2>

	<div class="mx-auto w-full max-w-md">
		<div class="bg-white p-6 lg:py-12 rounded-primary sm:px-12 shadow-sm">
			<form class="space-y-6" on:submit|preventDefault={auth.signIn}>
				<div>
					<label for="email" class="label">Username</label>
					<div class="mt-2">
						<input id="login" name="login" type="text" autocomplete="email" class="input">
					</div>
				</div>

				<div>
					<label for="password" class="label">Password</label>
					<div class="mt-2">
						<input id="password" name="password" type="password" autocomplete="current-password" class="input">
					</div>
				</div>

				<div>
					<button type="submit" class="btn btn-primary w-full">Sign in</button>
				</div>
			</form>
		</div>
	</div>
	<div class="mt-auto overflow-hidden">
		<img class="translate-y-px mx-auto w-80 lg:w-96 xl:w-full xl:max-w-lg" src="../img/logo.svg" alt="Gardens by the Bay">
	</div>
</div>