<script lang="ts">
	import { enhance } from '$app/forms';
	import Seo from '$lib/components/SEO.svelte';

	export let form;
</script>

<Seo
	title="Login into sveltekit"
	description="Login into sveltekit web app"
	keywords="login log signin"
	type="Login"
/>


<div class="flex justify-center items-center">
	<div class="w-full max-w-md p-4">
		<h1 class="text-2xl font-bold mb-4">log in</h1>
		<form method="POST" use:enhance>
			<div class="mb-4">
				<label for="username" class="block font-semibold">Username</label>
				<input
					autocomplete="off"
					id="username"
					name="username"
					class="w-full border border-gray-300 rounded-md py-2 px-3 text-black"
				/>
				{#if form?.errors?.username}
					<p class="text-error-500">{form.errors.username[0]}</p>
				{/if}
			</div>
			<div class="mb-4">
				<label for="password" class="block font-semibold">Password</label>
				<input
					type="password"
					id="password"
					name="password"
					class="w-full border border-gray-300 rounded-md py-2 px-3 text-black"
				/>
				{#if form?.errors?.password}
					<p class="text-error-500">{form.errors.password[0]}</p>
				{/if}
			</div>
			<div class="flex justify-center">
				<button class="btn variant-filled" type="submit">Sign in</button>
			</div>
		</form>
		<p class="mt-4 text-center">Don't have an account? <a href="/signup">Create new here.</a></p>
	</div>
</div>
