<script lang="ts">
	import {
		FieldGroup,
		Field,
		FieldLabel
	} from '$lib/components/ui/field';
	import { Input } from '$lib/components/ui/input';
	import { Button } from '$lib/components/ui/button';
	import { cn, type WithElementRef } from '$lib/utils.js';
	import type { HTMLFormAttributes } from 'svelte/elements';
	import type { PageProps } from '$types';

	let {
		class: className,
		form,
		...restProps
	}: WithElementRef<HTMLFormAttributes> & { form?: PageProps } = $props();


</script>

<form class={cn("flex flex-col gap-6", className)} {...restProps} method="post">
	<FieldGroup>
		<div class="flex flex-col items-center gap-1 text-center">
			<h1 class="text-2xl font-bold">Login to your account</h1>
			<p class="text-muted-foreground text-sm text-balance">
				Only admins need to log in.<br>Lost something? Go <a href="/" class="underline text-primary">home</a>.
			</p>
		</div>
		<Field>
			<FieldLabel for="email">Email</FieldLabel>
			<Input id="email" name="email" type="email" placeholder="m@example.com" required />
		</Field>
		<Field>
			<div class="flex items-center">
				<FieldLabel for="password">Password</FieldLabel>
			</div>
			<Input id="password" type="password" required />
		</Field>
		<Field>
			<Button type="submit">Login</Button>
		</Field>
	</FieldGroup>
</form>
