{{define "projects.html"}}
{{template "public_shell_start" .}}
{{template "projects_content" .}}
{{template "public_shell_end" .}}
{{end}}

{{define "projects_partial.html"}}
{{template "public_nav_oob" .}}
{{template "projects_content" .}}
{{end}}

{{define "projects_content"}}
<main id="main-content" class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
  <div class="mb-10 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
    <div>
      <p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Selected work</p>
      <h1 class="text-5xl font-semibold md:text-7xl">Projects</h1>
    </div>
    <p class="max-w-md text-neutral-600">A visual index of architectural and interior design work.</p>
  </div>
  <div class="grid gap-x-5 gap-y-10 sm:grid-cols-2 lg:grid-cols-3" hx-boost="true" hx-target="#main-content" hx-swap="outerHTML transition:true" hx-push-url="true">
    {{range .Projects}}
    <a href="/projects/{{.Slug}}" class="group block">
      <div class="aspect-[4/3] overflow-hidden bg-neutral-200">
        <img src="{{.CoverImage}}" alt="{{.Title}}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
      </div>
      <div class="mt-4">
        <div class="mb-2 flex items-start justify-between gap-4">
          <h2 class="text-xl font-medium">{{.Title}}</h2>
          <p class="text-sm text-neutral-500">{{.Year}}</p>
        </div>
        <p class="mb-3 text-sm text-neutral-500">{{.Location}} · {{.Category}} · {{.Status}}</p>
        <p class="leading-relaxed text-neutral-600">{{.Summary}}</p>
      </div>
    </a>
    {{end}}
  </div>
</main>
{{end}}