{{define "title"}}Browse{{end}}
{{define "scripts"}}{{end}}
{{define "content"}}
{{if .WatchlistIDs}}<script type="application/json" id="watchlist-ids-json">{{.WatchlistIDs}}</script>{{end}}
{{template "browse_content" .}}
{{end}}

{{define "browse_content"}}
<div id="browse-content" class="flex flex-col gap-6">
  <div class="flex items-end justify-between">
    <h1 class="text-xl font-normal tracking-[-0.02em] text-foreground">Browse</h1>
  </div>
  {{template "filter_bar" .}}

  <main class="w-full">
    {{if eq (len .Animes) 0}}
      <div class="flex h-64 flex-col items-center justify-center gap-3 text-foreground-muted">
        <svg class="h-10 w-10 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" /></svg>
        <p class="text-sm text-foreground">No anime found</p>
        <p class="text-sm">Try clearing filters or browsing what’s popular.</p>
        <div class="mt-2 flex gap-2">
          <a href="/browse?sfw=true" class=" inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Clear filters</a>
          <a href="/browse?order_by=popularity&sort=asc&sfw=true" class=" inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Browse popular</a>
        </div>
      </div>
    {{else}}
      <div id="anime-grid" class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7">
        {{range .Animes}}
          {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
        {{end}}
        {{if .HasNextPage}}
          {{template "browse_sentinel" .}}
        {{end}}
      </div>
    {{end}}
  </main>
</div>
{{end}}

{{define "anime_card_scroll"}}
  {{range .Animes}}
    {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
  {{end}}
  {{if .HasNextPage}}
    {{template "browse_sentinel" .}}
  {{end}}
{{end}}

{{define "studio_dropdown_items"}}
  {{if eq .Page 1}}
    <button type="button" data-studio-select="" class="flex w-full items-center px-5 py-2.5 text-left transition-colors hover:bg-surface-hover text-sm text-foreground">
      Any Studio
    </button>
  {{end}}
  {{range .StudioItems}}
    <button type="button" data-studio-select="{{.ID}}" class="flex w-full items-center px-5 py-2.5 text-left transition-colors hover:bg-surface-hover text-sm text-foreground">
      {{.Name}}
    </button>
  {{end}}
  {{if and (eq (len .StudioItems) 0) (not .HasNextPage)}}
    <div class="px-5 py-3 text-sm text-foreground-muted">No studios found.</div>
  {{end}}
  {{if .HasNextPage}}
    <div hx-get="/api/jikan/producers?q={{urlquery .Query}}&page={{.NextPage}}&limit={{.Limit}}"
         hx-trigger="intersect once"
         hx-swap="beforeend"
         hx-target="this"
         hx-push-url="false"
         class="h-px"></div>
  {{end}}
{{end}}

{{define "browse_sentinel"}}
  <div hx-get='{{browseURL . (dict "page" .NextPage)}}'
       hx-trigger="intersect once"
       hx-swap="outerHTML"
       hx-target="this"
       class="col-span-full h-px"></div>
{{end}}