<script lang="ts">
	import { Button, Input, Label } from 'flowbite-svelte';
	import type { ActionData } from './$types';
	import { enhance } from '$app/forms';

	export let form: ActionData;

	// Input value
	let oldPassword: string;
	let newPassword: string;
</script>

<div>
	<div class="mt-10 flex flex-col">
		<form method="post" action="?/reset" use:enhance>
			<div class="mb-5 flex gap-3">
				<div>
					<Label for="oldPassword" class="mb-2">Old Password</Label>
					<Input type="password" id="oldPassword" name="oldPassword" bind:value={oldPassword} />
				</div>
				<div>
					<Label for="newPassword" class="mb-2">New Password</Label>
					<Input type="password" id="newPassword" name="newPassword" bind:value={newPassword} />
				</div>
				<Button type="submit" class="h-fit place-self-end">Reset</Button>
			</div>
		</form>

		{#if form?.success}
			<p>Updated successfully</p>
		{/if}
	</div>

	{#if form?.message}
		<p>{form.message}</p>
	{/if}
</div>