Untitled

<script lang="ts">
	import { superForm } from "sveltekit-superforms/client";
	import type { PageData } from "./$types";
	import { writable } from "svelte/store";
	import SuperDebug from "sveltekit-superforms/client/SuperDebug.svelte";
	import PlusMinusBtn from "../../../components/PlusMinusBtn.svelte";

	export let data: PageData;

	const { form, constraints, enhance } = superForm(data.form, {
		taintedMessage: null,
	});

	let userInputStore = writable([{ name: "user1", id: 1 }]);

	function addUserToStore() {
		let lastId = $userInputStore[$userInputStore.length - 1].id;
		if (lastId < 6) {
			$userInputStore = [
				...$userInputStore,
				{ name: `user${++lastId}`, id: lastId },
			];
		}
	}

	function removeUserToStore() {
		let lastId = $userInputStore[$userInputStore.length - 1].id;
		if (lastId !== 1) {
			$userInputStore = [
				...$userInputStore.filter((obj) => obj.id !== lastId),
			];
		}
	}
</script>

<svelte:head>
	<title>House Creation</title>
</svelte:head>

<div class="flex flex-col items-center border-opacity-50">
	<div class="prose">
		<form method="post">
			<div class="form-control join-vertical gap-4">
				<input
					bind:value={$form.name}
					class="input input-bordered w-full max-w-xs join-item"
					type="text"
					name="houseName"
					placeholder="House name"
					{...$constraints.name}
				/>
				<PlusMinusBtn
					plusFn={addUserToStore}
					minusFn={removeUserToStore}
				/>
				{#each $userInputStore as user, index}
					<input
						bind:value={$form.mates[index]}
						class="input input-bordered w-full max-w-xs join-item"
						type="email"
						name={user.name}
						id={user.id.toString()}
						placeholder={`Mate ${user.id} email`}
						{...$constraints.mates}
					/>
				{/each}

				<button class="btn join-item btn-primary">Create House</button>
			</div>
			<div class="divider">OR</div>
		</form>
		<p>
			Click <button
				on:click={() =>
					document.getElementById("modalHouseCode")?.showModal()}
				><u><b>here</b></u></button
			> to enter in an existing house
		</p>

		<dialog id="modalHouseCode" class="modal">
			<div class="modal-box">
				<h3 class="font-bold text-lg">Enter an house code</h3>
				<br />
				<div class="flex flex-col items-center">
					<input
						class="input input-bordered input-secondary w-full max-w-xs"
						type="text"
						name="houseCode"
						placeholder="House code"
						required
					/>
				</div>
				<div class="modal-action">
					<form method="dialog">
						<button class="btn">Close</button>
					</form>
				</div>
			</div>
		</dialog>

		<SuperDebug data={$form} />

	</div>
</div>