<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
	class="box card"
>
	<div class="grid">
		<div class="grid grid-cols-[2rem,1fr,1fr]">
			<img
				class="w-6 align-middle"
				src="/images/right-sidebar/UMBE_user-icon.svg"
				alt="user-icon"
			/>
			<h2 class="text-secondary">Kunden Login</h2>
			<div class="justify-self-end text-secondary">
				<a
					class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary"
					href="./kontakt">Kontakt</a
				>
				/
				<a
					class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary"
					href="./agb">AGB</a
				>
			</div>
		</div>
		<hr class="mb-4" />
		<form on:submit={login}>
			<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}
			<button class="my-1 rounded-md px-2 py-1 ring-1 w-full bg-secondary text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
		</form>

		<div class="grid grid-cols-[1fr,1fr]">
			<a
				class="justify-self-start text-sm font-bold no-underline hover:text-primary"
				href="/auth/signup">Registrieren</a
			>
			<a
				class="justify-self-end text-sm font-bold no-underline hover:text-primary"
				href="/auth/passwort-vergessen">Passwort vergessen</a
			>
		</div>

	
	</div>
</div>

<style lang="scss">
</style>