{{define "title"}}Browse{{end}}
{{define "content"}}
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
<div class="flex flex-col gap-6">
  <div class="flex items-end justify-between">
    <h1 class="text-xl font-normal 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-4 text-foreground-muted">
        <svg class="h-12 w-12 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
        <p class="text-foreground">No anime found</p>
        <div class="flex gap-2">
          <a href="/browse" class="px-4 py-2 text-sm bg-background-surface hover:bg-background-button-hover text-foreground ring-1 ring-border transition-colors">Clear filters</a>
          <a href="/browse?order_by=popularity&sort=desc" class="px-4 py-2 text-sm bg-accent/20 hover:bg-accent/30 text-accent transition-colors">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 xl:grid-cols-5 2xl:grid-cols-6">
        {{range $i, $anime := .Animes}}
          {{$isThreshold := eq (add $i 1) (sub (len $.Animes) 8)}}
          {{if and $isThreshold $.HasNextPage}}
            <div hx-get="/browse?q={{$.Query}}&type={{$.Type}}&status={{$.Status}}&order_by={{$.OrderBy}}&sort={{$.Sort}}&sfw={{$.SFW}}&{{genresParams $.Genres}}&page={{$.NextPage}}"
                 hx-trigger="revealed"
                 hx-swap="afterend"
                 hx-target="this"
                 class="contents">
              {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
            </div>
          {{else}}
            {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
          {{end}}
        {{end}}
      </div>
    {{end}}
  </main>
</div>
{{end}}

{{define "anime_card_scroll"}}
  {{$count := len .Animes}}
  {{range $i, $anime := .Animes}}
    {{$isThreshold := eq (add $i 1) (sub $count 8)}}
    {{if and $isThreshold $.HasNextPage}}
      <div hx-get="/browse?q={{$.Query}}&type={{$.Type}}&status={{$.Status}}&order_by={{$.OrderBy}}&sort={{$.Sort}}&sfw={{$.SFW}}&{{genresParams $.Genres}}&page={{$.NextPage}}"
           hx-trigger="revealed"
           hx-swap="afterend"
           hx-target="this"
           class="contents">
        {{template "anime_card" dict "Anime" $anime "WithActions" true "IsWatchlist" (index $.WatchlistMap $anime.MalID)}}
      </div>
    {{else}}
      {{template "anime_card" dict "Anime" $anime "WithActions" true "IsWatchlist" (index $.WatchlistMap $anime.MalID)}}
    {{end}}
  {{end}}
{{end}}