<script lang="ts">
	import LabelWrapper from "$lib/components/atoms/label-wrapper.svelte";
	import Button from "$lib/components/ui/button/button.svelte";
	import Input from "$lib/components/ui/input/input.svelte";
	import { authVM } from "./auth.vm.svelte";
	import ButtonLoadableText from "$lib/components/atoms/button-loadable-text.svelte";
</script>

<form
	action="#"
	onsubmit={authVM.onAuthFormSubmit}
	method="POST"
	class="flex w-full flex-col gap-8"
>
	<LabelWrapper label="Username">
		<Input required name="username" maxlength={128} minlength={4} />
	</LabelWrapper>

	<LabelWrapper label="Password">
		<Input
			required
			type="password"
			name="password"
			maxlength={128}
			minlength={6}
		/>
	</LabelWrapper>

	<Button type="submit" disabled={authVM.submitting}>
		<ButtonLoadableText
			loading={authVM.submitting}
			loadingText="Authenticating"
			text="Continue"
		/>
	</Button>
</form>
