33 lines
1.2 KiB
Plaintext
33 lines
1.2 KiB
Plaintext
{{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}}
|