{{template "site_start" .}}
<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}} · {{.Project.Status}}</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-2 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><p class="text-neutral-500">Status</p><p>{{.Project.Status}}</p></div>
      </div>
    </div>
    <div class="mt-10 grid gap-8 md:grid-cols-[0.8fr_1.2fr]">
      <div class="border-t border-neutral-200 pt-4">
        <p class="mb-2 text-sm text-neutral-500">Scope</p>
        <p class="leading-relaxed">{{.Project.Scope}}</p>
      </div>
      <div>
        <p class="mb-4 text-2xl leading-snug text-neutral-800">{{.Project.Summary}}</p>
        <p class="max-w-3xl text-xl leading-relaxed text-neutral-600">{{.Project.Description}}</p>
      </div>
    </div>
  </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 "site_end" .}}