From 966eced0f882a05ea71b09be3d188e13d66db474 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Tue, 16 Jun 2026 10:47:26 +0200
Subject: [PATCH] feat: add anime_characters component template

---
 templates/components/anime_characters.gohtml | 40 ++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 templates/components/anime_characters.gohtml

diff --git a/templates/components/anime_characters.gohtml b/templates/components/anime_characters.gohtml
new file mode 100644
index 0000000..35d5d27
--- /dev/null
+++ b/templates/components/anime_characters.gohtml
@@ -0,0 +1,40 @@
+{{define "anime_characters"}}
+<div class="mt-12 w-full">
+  <h2 class="mb-6 text-lg font-normal text-foreground">Characters & Cast</h2>
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+    {{range (slice .Items 0 (min (len .Items) 10))}}
+      <div class="flex gap-3 bg-background-surface p-3">
+        <div class="h-16 w-12 shrink-0 overflow-hidden bg-background-surface">
+          <img src="{{.Character.Images.Jpg.ImageURL}}" alt="{{.Character.Name}}" class="h-full w-full object-cover" loading="lazy" />
+        </div>
+        <div class="flex flex-col justify-center overflow-hidden">
+          <span class="truncate text-sm font-medium text-foreground">{{.Character.Name}}</span>
+          <span class="truncate text-xs text-foreground-muted">{{.Role}}</span>
+          {{if .VoiceActors}}
+            <span class="mt-1 truncate text-[11px] text-foreground-muted">{{(index .VoiceActors 0).Person.Name}}</span>
+          {{end}}
+        </div>
+      </div>
+    {{end}}
+  </div>
+</div>
+{{end}}
+
+{{define "anime_characters_loading"}}
+<div hx-get="/anime/{{.AnimeID}}?section=characters" hx-trigger="load" hx-swap="outerHTML">
+  <div class="mt-12 w-full">
+    <h2 class="mb-6 text-lg font-normal text-foreground">Characters & Cast</h2>
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+      {{range (seq 5)}}
+        <div class="flex h-20 gap-3 bg-background-surface p-3">
+          <div class="skeleton h-16 w-12 shrink-0"></div>
+          <div class="flex flex-col justify-center gap-2 grow">
+            <div class="skeleton h-3 w-2/3"></div>
+            <div class="skeleton skeleton-subtle h-2 w-1/2"></div>
+          </div>
+        </div>
+      {{end}}
+    </div>
+  </div>
+</div>
+{{end}}