{{define "admin_projects.html"}}
{{template "admin_shell_start" .}}
{{template "admin_projects_panel" .}}
{{template "admin_shell_end" .}}
{{end}}

{{define "admin_projects_partial.html"}}
{{template "admin_tabs_oob" .}}
{{template "admin_flash_oob" .}}
{{template "admin_projects_panel" .}}
{{end}}

{{define "admin_projects_panel"}}
<section class="grid gap-6">
  <section class="bg-white p-6 shadow-sm">
    <h1 class="mb-6 text-2xl font-semibold">Add Project</h1>
    <form method="post" action="/admin/projects" enctype="multipart/form-data" class="grid gap-4 md:grid-cols-2">
      <input name="title" required placeholder="Title" class="border px-3 py-2">
      <input name="slug" placeholder="Slug, optional" class="border px-3 py-2">
      <input name="location" required placeholder="Location" class="border px-3 py-2">
      <input name="year" required placeholder="Year" class="border px-3 py-2">
      <input name="category" required placeholder="Category" class="border px-3 py-2">
      <label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="featured" type="checkbox"> Featured</label>
      <textarea name="description" required rows="4" placeholder="Description" class="border px-3 py-2 md:col-span-2"></textarea>
      <input name="cover_image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" class="border px-3 py-2 md:col-span-2">
      <button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white md:col-span-2">Create project</button>
    </form>
  </section>

  <section class="grid gap-6">
    <h2 class="text-2xl font-semibold">Projects</h2>
    {{range .Projects}}
    <article class="bg-white p-6 shadow-sm">
      <form method="post" action="/admin/projects/{{.ID}}" enctype="multipart/form-data" class="grid gap-4 md:grid-cols-2">
        <input type="hidden" name="cover_image_current" value="{{.CoverImage}}">
        <input name="title" value="{{.Title}}" class="border px-3 py-2">
        <input name="slug" value="{{.Slug}}" class="border px-3 py-2">
        <input name="location" value="{{.Location}}" class="border px-3 py-2">
        <input name="year" value="{{.Year}}" class="border px-3 py-2">
        <input name="category" value="{{.Category}}" class="border px-3 py-2">
        <label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="featured" type="checkbox" {{if .Featured}}checked{{end}}> Featured</label>
        <textarea name="description" rows="4" class="border px-3 py-2 md:col-span-2">{{.Description}}</textarea>
        <div class="grid gap-3 md:col-span-2 md:grid-cols-[120px_1fr] md:items-center">
          <img src="{{.CoverImage}}" alt="" class="h-24 w-24 object-cover">
          <input name="cover_image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" class="border px-3 py-2">
        </div>
        <button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white">Save</button>
      </form>
      <form method="post" action="/admin/projects/{{.ID}}/delete" class="mt-3">
        <button class="text-sm text-red-700">Delete project</button>
      </form>

      <div class="mt-6 border-t pt-5">
        <h3 class="mb-3 font-semibold">Gallery</h3>
        <div class="mb-4 grid gap-3 sm:grid-cols-3 md:grid-cols-5">
          {{range .Images}}
          <div>
            <img src="{{.Path}}" alt="{{.Caption}}" class="aspect-square w-full object-cover">
            <form method="post" action="/admin/project-images/{{.ID}}/delete" class="mt-1"><button class="text-xs text-red-700">Remove</button></form>
          </div>
          {{end}}
        </div>
        <form method="post" action="/admin/projects/{{.ID}}/images" enctype="multipart/form-data" class="grid gap-3 md:grid-cols-[1fr_1fr_auto]">
          <input name="caption" placeholder="Caption" class="border px-3 py-2">
          <input name="image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" required class="border px-3 py-2">
          <button class="bg-neutral-950 px-5 py-2 text-sm uppercase tracking-[0.18em] text-white">Add image</button>
        </form>
      </div>
    </article>
    {{end}}
  </section>
</section>
{{end}}