{{define "watch_order"}}
<div class="space-y-4">
  <h2 class="text-base font-normal text-foreground">Watch Order</h2>
  <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
    {{range .Relations}}
      <div class="group relative">
        {{template "anime_card" dict "Anime" .Anime "WithActions" true "Compact" true "HasTopBadge" true "IsWatchlist" (index $.WatchlistMap .Anime.MalID)}}
        {{if eq .Anime.MalID $.AnimeID}}
          <div class="bg-accent absolute -top-2 -right-2 z-20 px-2 py-0.5 text-[10px] font-medium text-on-accent">
            CURRENT
          </div>
        {{end}}
        <div class="absolute top-2 left-2 z-20 bg-black/60 px-2 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm">
          {{.Relation}}
        </div>
      </div>
    {{end}}
  </div>
</div>
{{end}}

{{define "watch_order_loading"}}
<div
  hx-get="/api/watch-order?animeId={{.AnimeID}}"
  hx-trigger="load delay:1500ms"
>
  <div class="mt-8 flex items-center gap-3 text-foreground-muted">
    <div class="size-5 animate-spin rounded-full border-2 border-t-transparent border-accent"></div>
    <span class="text-sm">Loading watch order sequence...</span>
  </div>
</div>
{{end}}