<script lang="ts">
	import { loginClient } from "#lib/login";
	import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
	import { fade } from "svelte/transition";

	let email: string;
	let passwort: string;

	async function login(e: SubmitEvent) {
		console.log(e);
		
		e.preventDefault();
		const response = await loginClient(email, passwort);

		if (response === null) {
			errorHidden = false;
		} else {
			window.location.href = "/dashboard";
		}
	}

	let errorHidden = true;
</script>

<div
	id="card-login">

	<div>

	
		<form on:submit={login}>
			<div class="grid grid-cols-[1fr_1fr] gap-2">
			<input
				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
				type="text"
				placeholder="nutzer@email.com"
				name="email"
				bind:value={email}
				on:focus={() => (errorHidden = true)}
				required
			/>
			<input
				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
				type="password"
				minlength="8"
				placeholder="********"
				name="passwort"
				bind:value={passwort}
				on:focus={() => (errorHidden = true)}
				required
			/>
			{#if !errorHidden}
			<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
				<CrossCircled size={24} />
				<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
			</div>
			{/if}
		
</div>
<div class="grid grid-cols-[3fr_2fr] gap-2">

			<div class="w-full text-left self-center">
				<a
					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
					href="/auth/signup">Registrieren</a
				> /
				<a
					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
					href="/auth/passwort-vergessen">Passwort vergessen</a
				>
			</div>

			<button class="my-1 rounded-md px-2 py-1 ring-1 w-[50%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Einloggen</button>

		</div>
		</form>

		

		<div></div>
	</div>
</div>

<style lang="postcss">


</style>
