<script>
	import { applyAction, enhance } from '$app/forms';
	import SmallLoader from '$lib/components/SmallLoader.svelte';
	import { receive, send } from '$lib/utils/helpers';
	import { t } from 'svelte-i18n';

	/** @type {import('./$types').ActionData} */
	export let form;

	let loading = false;
	/** @type {import('./$types').SubmitFunction} */
	const handleRequestChange = async () => {
		loading = true;
		return async ({ result }) => {
			await applyAction(result);
			loading = false;
		};
	};
</script>

<div class="container">
	<form class="content" method="POST" use:enhance={handleRequestChange}>
		<h1 class="step-title">{$t('forgot_password')}</h1>
		{#if form?.errors}
			{#each form?.errors as error (error.id)}
				<h4
					class="step-subtitle warning"
					in:receive={{ key: error.id }}
					out:send={{ key: error.id }}
				>
					{$t(error.key)}
				</h4>
			{/each}
		{/if}

		<div class="input-box">
			<span class="label">{$t('user.email')}:</span>
			<input
				class="input"
				type="email"
				name="email"
				id="email"
				placeholder={$t('placeholder.email')}
				required
			/>
		</div>
		{#if loading}
			<SmallLoader width={30} message={$t('loading.please_wait')} />
		{:else}
			<button class="button-dark" disabled={loading}>{$t('confirm')}</button>
		{/if}
	</form>
</div>
