{{template "head" .}}
{{template "site_header" .}}
<main class="pt-28 md:pt-36">
  <section class="mx-auto max-w-7xl px-5 md:px-8">
    <p class="mb-4 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Project.Category}}</p>
    <div class="grid gap-8 md:grid-cols-[1.2fr_0.8fr] md:items-end">
      <h1 class="text-5xl font-semibold leading-none md:text-8xl">{{.Project.Title}}</h1>
      <div class="grid grid-cols-3 gap-4 border-t border-neutral-200 pt-4 text-sm">
        <div><p class="text-neutral-500">Location</p><p>{{.Project.Location}}</p></div>
        <div><p class="text-neutral-500">Year</p><p>{{.Project.Year}}</p></div>
        <div><p class="text-neutral-500">Type</p><p>{{.Project.Category}}</p></div>
      </div>
    </div>
    <p class="mt-10 max-w-3xl text-xl leading-relaxed text-neutral-600">{{.Project.Description}}</p>
  </section>

  <section class="mx-auto mt-14 max-w-7xl px-5 pb-24 md:px-8">
    <div class="grid gap-5">
      {{range .Project.Images}}
      <button type="button" class="group block w-full text-left" hx-get="/projects/{{$.Project.Slug}}/images/{{.ID}}/overlay" hx-target="#overlay-root" hx-swap="innerHTML transition:true">
        <img src="{{.Path}}" alt="{{.Caption}}" class="max-h-[86vh] w-full bg-neutral-200 object-cover transition duration-500 group-hover:brightness-90">
        {{if .Caption}}<span class="mt-2 block text-sm text-neutral-500">{{.Caption}}</span>{{end}}
      </button>
      {{end}}
    </div>
  </section>
</main>
{{template "footer" .}}
<div id="overlay-root"></div>
</body>
</html>