{{define "watch_order"}}
<div class="space-y-4" id="watch-order-section">
  <div class="flex items-center justify-between gap-4">
    <h2 class="text-base font-normal text-foreground">Watch Order</h2>
    {{if ne .Mode "complete"}}
      <button
        type="button"
        class="bg-background-button px-3 py-1.5 text-xs font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent"
        hx-get="/api/watch-order?animeId={{.AnimeID}}&mode=complete"
        hx-target="#watch-order-section"
        hx-swap="outerHTML"
      >
        Show complete list
      </button>
    {{else}}
      <button
        type="button"
        class="bg-background-button px-3 py-1.5 text-xs font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent"
        hx-get="/api/watch-order?animeId={{.AnimeID}}&mode=main"
        hx-target="#watch-order-section"
        hx-swap="outerHTML"
      >
        Show main list
      </button>
    {{end}}
  </div>
  <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}}&mode={{if .Mode}}{{.Mode}}{{else}}main{{end}}"
  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}}
