{{define "project"}}
{{template "layout-page-start" (args "Title" .Title)}}
<div class="fixed w-full h-full bg-green-500 grid grid-cols-4 grid-rows-1">
	<nav class="bg-red-500 h-full">
		<h1>{{.Title}}</h1>
		<p>{{.ID}}</p>
	</nav>
	<main class="overflow-y-scroll flex justify-center col-span-3 py-20">
		<div class="flex flex-col gap-10 h-fit">
			{{range $pageID, $page := .Pages}}
			<section id="{{$pageID}}" class="bg-blue-500 w-100">
				<img src="/projects/{{$.ID}}/pages/{{$pageID}}/">
				<form action="/projects/{{$.ID}}/pages/{{$pageID}}/" method="post">
					<input type="hidden" name="x-method" value="delete">
					<button class="rounded-full bg-red-700 p-1 px-3 text-sm text-slate-100">
						Delete
					</button>
				</form>
			</section>
			{{end}}
			<form action="/projects/{{.ID}}/pages/" method="post" enctype="multipart/form-data">
				<input type="file" name="image" required>
				<button>Add new page</button>
			</form>
		</div>
</div>
</main>
</div>
{{template "layout-page-end"}}
{{end}}