{{define "content"}}
{{with .Content}}
<div data-image-browser data-active-index="{{.ActiveIndex}}" class="flex h-full min-h-[calc(100vh-7rem)] flex-col gap-4">
  <div class="flex items-center justify-between gap-3">
    <div>
      <h1 class="text-lg font-semibold text-slate-100">{{.Date}}</h1>
      <p class="text-sm text-slate-400">Images</p>
    </div>
    {{if .Images}}
      <div class="flex items-center gap-2">
        <a href="/day/{{.Date}}/images?idx={{.PrevIndex}}" data-prev-index="{{.PrevIndex}}" class="rounded-md border border-slate-700 px-3 py-2 text-sm font-medium text-slate-100 hover:bg-slate-800">Prev</a>
        <a href="/day/{{.Date}}/images?idx={{.NextIndex}}" data-next-index="{{.NextIndex}}" class="rounded-md border border-slate-700 px-3 py-2 text-sm font-medium text-slate-100 hover:bg-slate-800">Next</a>
      </div>
    {{end}}
  </div>

  {{if .Images}}
    <div class="h-28 shrink-0 overflow-x-auto border-y border-slate-800 py-3">
      <div class="flex h-full gap-3">
        {{range .Images}}
          <a href="/day/{{$.Content.Date}}/images?idx={{.Index}}" class="h-full w-40 shrink-0 overflow-hidden rounded-md border border-slate-800 bg-slate-950 {{if .Active}}ring-2 ring-indigo-400{{end}}">
            <img src="{{.ThumbURL}}" alt="{{.Filename}}" class="h-full w-full object-cover">
          </a>
        {{end}}
      </div>
    </div>

    <div class="relative min-h-0 flex-1 overflow-hidden bg-black">
      <img src="{{.Current.RawURL}}" alt="{{.Current.Filename}}" class="h-full max-h-[calc(100vh-15rem)] min-h-[18rem] w-full object-contain">
      <a href="/day/{{.Date}}/images?idx={{.PrevIndex}}" class="absolute left-3 top-1/2 -translate-y-1/2 rounded-md bg-slate-950/80 px-3 py-2 text-sm font-medium text-white hover:bg-slate-900">Prev</a>
      <a href="/day/{{.Date}}/images?idx={{.NextIndex}}" class="absolute right-3 top-1/2 -translate-y-1/2 rounded-md bg-slate-950/80 px-3 py-2 text-sm font-medium text-white hover:bg-slate-900">Next</a>
    </div>

    <script>
      (() => {
        const root = document.querySelector("[data-image-browser]");
        if (!root) return;
        const active = Number(root.dataset.activeIndex || "0");
        const prev = root.querySelector("[data-prev-index]")?.dataset.prevIndex || "0";
        const next = root.querySelector("[data-next-index]")?.dataset.nextIndex || "0";
        const go = (index) => {
          const url = new URL(window.location.href);
          url.searchParams.set("idx", index);
          window.location.href = url.toString();
        };
        window.history.replaceState({ idx: active }, "", window.location.href);
        window.addEventListener("keydown", (event) => {
          if (event.key === "ArrowLeft") go(prev);
          if (event.key === "ArrowRight") go(next);
        });
      })();
    </script>
  {{else}}
    <div class="border border-slate-800 bg-slate-950 p-6 text-sm text-slate-400">No images for this day.</div>
  {{end}}
</div>
{{end}}
{{end}}