{data.list.name}

{data.total} {data.total === 1 ? 'item' : 'items'}

{#if data.isOwner}table view{/if} {#if data.isAdmin}{/if}

{#if form?.message}

{form.message}

{/if} {#if uploadError}

{uploadError}

{/if} {#if data.list.isProgress}

{data.checked} of {data.total} checked · {data.total ? Math.round((data.checked / data.total) * 100) : 0}%

{/if} {#if data.isAdmin && managing} list settings Delete this listDelete this list?Deleting this list also removes its items and saved progress. {/if}

{#if item.pictureUrl}{/if}

{item.name}
{#if item.description}
{item.description}
{/if} {#if data.list.columns.length}
{#each data.list.columns.filter((c) => item.extras[c.name] !== null && item.extras[c.name] !== '') as column, i (column.name)}{#if i} · {/if}{column.label}: {#if column.uiType === 'url'}link{:else if column.uiType === 'bool'}{item.extras[column.name] ? 'yes' : 'no'}{:else if column.uiType === 'cents'}{( Number(item.extras[column.name]) / 100 ).toFixed(2)}{:else}{item.extras[column.name]}{/if}{/each}
{/if}
{#if data.list.isProgress && data.isAdmin}

{:else if data.list.isProgress && completed.has(item.id)} {/if} {#if data.isAdmin && managing}{/if}
{search ? 'No matching items' : 'no items yet'}

{ if (!open) editingItem = null; }} > Edit itemUpdate the name, picture and description. {#if form?.message}

{form.message}

{/if} {#if uploadError}

{uploadError}

{/if} {#if editingItem}

Name {#if editingItem.pictureUrl} Remove current picture{/if} Description (optional)

</label
					>
					<ListExtraFields columns={data.list.columns} values={editingItem.extras} />
					<Button
						type="submit"
						disabled={uploading}
						class="justify-self-start rounded bg-gray-900 px-4 py-2 text-white disabled:opacity-50"
						>Save item</Button
					>
				</form>
				<form
					method="POST"
					action="?/removeItem"
					use:enhance={() =>
						async ({ result, update }) => {
							await update();
							if (result.type === 'success') {
								editingItem = null;
								addOpen = false;
							}
						}}
					class="mt-5 border-t border-[var(--site-border)] pt-4"
				>
					<input type="hidden" name="itemId" value={editingItem.id} />
					<Button
						type="submit"
						class="text-sm text-red-700 underline"
						aria-label={`Remove ${editingItem.name}`}>Remove item</Button
					>
				</form>
			{/if}</Dialog.Content
		></Dialog.Root
	>
	{#if data.isAdmin && managing}
		<Dialog.Root bind:open={addOpen}
			><Dialog.Trigger class="underline underline-offset-4">add item</Dialog.Trigger><Dialog.Content
				><Dialog.Header
					><Dialog.Title>Add item</Dialog.Title><Dialog.Description
						>Add a new entry to this list.</Dialog.Description
					></Dialog.Header
				>
				{#if form?.message}<p role="alert" class="text-destructive">{form.message}</p>{/if}
				{#if uploadError}<p role="alert" class="text-destructive">{uploadError}</p>{/if}
				<form
					method="POST"
					action="?/addItem"
					enctype="multipart/form-data"
					use:enhance={uploadPicture}
					class="mt-5 grid gap-3"
				>
					<label
						>Name<Input
							name="name"
							required
							maxlength={500}
							class="block w-full rounded border p-2"
						/></label
					>
					<ListPictureDropzone />
					<label
						>Description (optional)<Textarea
							name="description"
							maxlength={5000}
							rows={3}
							class="block w-full rounded border p-2"
						/></label
					>
					<ListExtraFields columns={data.list.columns} />
					<Button
						type="submit"
						disabled={uploading}
						class="justify-self-start rounded bg-gray-900 px-4 py-2 text-white disabled:opacity-50"
						>Add item</Button
					>
				</form>
			</Dialog.Content></Dialog.Root
		>
		<noscript><p>Enable JavaScript to upload item pictures.</p></noscript>
	{/if}
</section>