<script lang="ts">
	import Title from "$lib/components/atoms/title.svelte";
	import LoginForm from "$lib/domains/auth/view/login-form.svelte";
	import { trpcApiStore, svTrpcApiStore } from "$lib/stores/api";
	import { trpc, trpcRaw } from "$lib/trpc/trpc";
	import { onMount } from "svelte";

	svTrpcApiStore.set(trpc());

	onMount(() => {
		trpcApiStore.set(trpcRaw());
	});
</script>

<main class="grid h-screen w-screen place-items-center">
	<section
		class="flex w-full max-w-md flex-col items-center justify-center gap-8"
	>
		<div class="flex flex-col items-center gap-2">
			<Title weight="medium" size="h2" color="gradientPrimary"
				>Sign in</Title
			>
			<p class="max-w-96 font-light">Enter your credentials to continue</p>
		</div>
		<LoginForm />
	</section>
</main>
