{{define "watch_order"}}
<div class="space-y-4">
  <h2 class="text-lg font-medium text-neutral-300">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}}
        {{if eq .Anime.MalID $.AnimeID}}
          <div class="bg-accent absolute -top-2 -right-2 z-20 px-2 py-0.5 text-[10px] font-bold text-white shadow-md">
            CURRENT
          </div>
        {{end}}
        <div class="absolute top-2 left-2 z-20 border border-white/10 bg-black/80 px-2 py-0.5 text-[10px] font-medium text-white backdrop-blur-md">
          {{.Relation}}
        </div>
      </div>
    {{end}}
  </div>
</div>
{{end}}