{{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 $page := .Pages}}
			<section id="{{$page.ID}}" class="w-fit">
				<!-- 
					INFO: The interaction form could be another page that is shown
					when "Add Interaction" is clicked. Said page could be also a partial
					than can replace the current image using htmx, so it is
					compatible with JavaScript enabled or not.
				-->
				<div class="flex flex-row">
					<form action="/projects/{{$.ID}}/pages/{{$page.ID}}/interactions/" method="post" class="w-100">
						<div class="flex">
							{{if (gt (len $page.Interactions) 0)}}
							<div class="relative flex">
								<div class="absolute z-2 w-full h-full top-0 left-0">
									{{range $interactionID, $interaction := $page.Interactions}}
									<a class="absolute" href="{{$interaction.URL}}"
										style="top:{{$interaction.Y}}%;left:{{$interaction.X}}%;">
										<span
											class="bg-red-200 opacity-10 block w-10 h-10 transform -translate-x-[50%] -translate-y-[50%]"></span>
									</a>
									{{end}}
								</div>
								<img src="/projects/{{$.ID}}/pages/{{$page.ID}}/" class="z-1 relative">
							</div>
							{{else}}
							<img src="/projects/{{$.ID}}/pages/{{$page.ID}}/" class="z-1 relative">
							{{end}}
							<input type="range" min="0" max="100" name="y" style="writing-mode: vertical-lr;">
						</div>
						<input type="range" min="0" max="100" name="x" class="w-full">
						<input type="url" required name="link" class="bg-slate-300" placeholder="url of interaction">
						<button class="rounded-full bg-blue-700 p-1 px-3 text-sm text-slate-100">
							Add interaction
						</button>
					</form>
					{{if (gt (len $page.Interactions) 0)}}
					<div class="flex flex-col gap-2">
						{{range $interactionID, $interaction := $page.Interactions}}
						<form action="/projects/{{$.ID}}/pages/{{$page.ID}}/interactions/{{$interactionID}}/"
							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">
								&#x1F5D1;&#xFE0F;{{$interaction.URL}}
							</button>
						</form>
						{{end}}
					</div>
					{{end}}
				</div>
				<form action="/projects/{{$.ID}}/pages/{{$page.ID}}/" 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>
	</main>
</div>
{{template "layout-page-end"}}
{{end}}