<script lang="ts">
    import { page } from '$app/stores';
    import { tagList } from '$lib/stores.svelte.js';

    let { original = $bindable() } = $props();

    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));
        });
    };

    $effect.pre(() => {
        reloadTags(original);
    });
</script>

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

        <label>
            <p>Description:</p>
            <textarea
                style="min-width:400px;min-height:100px"
                name="description"
                value={original.description}
            ></textarea>
        </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>
