From c82d25d9c8a262aa90a20d2143fc47c193ae3b35 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sat, 13 Jun 2026 21:23:17 +0200
Subject: [PATCH] feat: add standalone top picks template

---
 templates/top_picks.gohtml | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 templates/top_picks.gohtml

diff --git a/templates/top_picks.gohtml b/templates/top_picks.gohtml
new file mode 100644
index 0000000..e90ba73
--- /dev/null
+++ b/templates/top_picks.gohtml
@@ -0,0 +1,30 @@
+{{define "title"}}Top Picks{{end}}
+{{define "content"}}
+<div class="flex flex-col gap-6 pb-12">
+  <div class="flex flex-wrap items-end justify-between gap-3">
+    <div class="min-w-0">
+      <h1 class="text-xl font-normal tracking-[-0.02em] text-foreground">Top Picks for You</h1>
+      <p class="mt-1 text-sm text-foreground-muted">The full ranked list from your current watchlist profile.</p>
+    </div>
+    <a href="/" class="text-sm text-foreground-muted transition-colors hover:text-foreground">Back to Home</a>
+  </div>
+
+  {{if eq (len .Animes) 0}}
+    <div class="flex h-64 flex-col items-center justify-center gap-3 text-foreground-muted">
+      <svg class="h-10 w-10 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
+      <p class="text-sm text-foreground">No top picks yet</p>
+      <p class="text-sm">Add a few anime to your watchlist so the recommender has something to learn from.</p>
+      <div class="mt-2 flex gap-2">
+        <a href="/watchlist" class="inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Open watchlist</a>
+        <a href="/browse" class="inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Browse anime</a>
+      </div>
+    </div>
+  {{else}}
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7">
+      {{range .Animes}}
+        {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
+      {{end}}
+    </div>
+  {{end}}
+</div>
+{{end}}