<script lang="ts">
	import { enhance } from '$app/forms'
	import Task from '$lib/components/task.svelte'

	const { data } = $props()

</script>

<div class="container">
	<h1>Tasks</h1>

	<div class="task">
		<form method="POST" action="?/create" use:enhance>
			<input name="content" />
		</form>
	</div>

	{#each data.tasks as task}
		<Task task={task} --width="75%" />
	{/each}
</div>

<style>
	
	.container {
		width: 100%;
		text-align: center;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.task {
		width: 75%;
		margin: 5px;
		padding: 5px;
		border: 1px solid black;
	}

</style>
