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

<form
	onsubmit={(ev) => {
		profileInfoVM.onProfileInfoFormSubmit(ev);
	}}
	action="#"
	class="flex flex-col gap-4"
>
	<LabelWrapper label="Username">
		<Input
			disabled
			name="username"
			value={profileInfoVM.userInfo?.username}
			required
			min={2}
			max={64}
		/>
	</LabelWrapper>

	<LabelWrapper label="Email">
		<Input
			name="email"
			type="email"
			value={profileInfoVM.userInfo?.email}
			required
			min={6}
			max={128}
		/>
	</LabelWrapper>

	<Button disabled={profileInfoVM.updating} type="submit">
		{profileInfoVM.updating ? "Saving..." : "Save changes"}
	</Button>
</form>
