<script>
	import { page } from '$app/stores';
	import { tagList } from '$lib/stores.js';

	export let original;

	let tagMap = new Map();

	// Create a mapping of tags and their checked status
	let reloadTags = (original) => {
		tagList.forEach((tag) => {
			tagMap.set(tag, original.tags.includes(tag));
		});
	};

	$: reloadTags(original);
</script>

{#key $page.url.pathname}
	<form method="POST">
		<br />
		<label>
			<p>Title:</p>
			<input type="text" name="title" bind:value={original.title} />
		</label>
		<br />

		<label>
			<p>Description:</p>
			<textarea
				style="min-width:400px;min-height:100px"
				name="description"
				bind:value={original.description}
			/>
		</label>
		<br />
		<label>
			<p>Tags:</p>
			<div class="checkboxContainer">
				{#each tagList as tag}
					<label>
						<input type="checkbox" name="tags" value={tag} checked={tagMap.get(tag)} />
						{tag}
					</label>
				{/each}
			</div>
		</label>
		<br />

		<button type="submit">Submit</button>
	</form>
{/key}

<style>
	form {
		margin-left: 10px;
	}

	label {
		display: flex;
		align-items: center;
	}

	label > p {
		margin-right: 5px;
	}

	.checkboxContainer {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 1px;
		max-width: 50%;
	}
</style>
