<script lang="ts">
	import ButtonLoadableText from "$lib/components/atoms/button-loadable-text.svelte";
	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 { securityVM } from "./security.vm.svelte";
</script>

<form
	action="#"
	method="post"
	onsubmit={(ev) => {
		ev.preventDefault();
		securityVM.confirmAndSumbit();
	}}
	class="flex flex-col gap-4"
>
	<LabelWrapper label="Current Password">
		<Input
			type="password"
			name="currentPassword"
			required
			bind:value={securityVM.previousPassword}
			min={6}
			max={128}
		/>
	</LabelWrapper>

	<LabelWrapper label="New Password">
		<Input
			type="password"
			name="newPassword"
			bind:value={securityVM.newPassword}
			required
			min={6}
			max={128}
		/>
	</LabelWrapper>

	<LabelWrapper label="Confirm Password">
		<Input
			type="password"
			name="confirmPassword"
			bind:value={securityVM.confirmPassword}
			required
			min={6}
			max={128}
		/>
	</LabelWrapper>

	<Button type="submit" disabled={securityVM.submitting}>
		<ButtonLoadableText
			loading={securityVM.submitting}
			loadingText="Changing password..."
			text="Change Password"
		/>
	</Button>
</form>
