<script lang="ts">
	let { data, form } = $props();
</script>

<div class="mx-auto max-w-md space-y-4 pt-12">
	<div>
		<h2 class="text-2xl font-bold tracking-tight">Imposta nuova password</h2>
		{#if data.valid && data.email}
			<p class="mt-1 text-sm text-slate-600">Account: <strong>{data.email}</strong></p>
		{/if}
	</div>

	{#if !data.valid}
		<div class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
			Questo link non è valido oppure è scaduto. <a href="/password-reset" class="font-medium underline">Richiedine uno nuovo</a>.
		</div>
	{:else}
		{#if form?.error}
			<div class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
				{form.error}
			</div>
		{/if}
		<form method="POST" class="space-y-3 rounded-lg border border-slate-200 bg-white p-5">
			<label class="block">
				<span class="block text-sm font-medium text-slate-700">Nuova password (min 8 caratteri)</span>
				<input
					name="newPassword"
					type="password"
					required
					minlength={8}
					autocomplete="new-password"
					class="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
				/>
			</label>
			<label class="block">
				<span class="block text-sm font-medium text-slate-700">Conferma nuova password</span>
				<input
					name="confirmPassword"
					type="password"
					required
					minlength={8}
					autocomplete="new-password"
					class="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
				/>
			</label>
			<div class="flex justify-end">
				<button
					type="submit"
					class="rounded-md bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600"
				>
					Imposta password
				</button>
			</div>
		</form>
	{/if}
</div>
