refactor(ui): complete ui template migration and fix playback

templates/index.gohtml

@@ -1,9 +1,40 @@
-{{define "title"}}Hello World{{end}}
+{{define "title"}}Home{{end}}
 {{define "content"}}
-  <h2 class="text-3xl font-bold mb-8 text-center">Hello World</h2>
-  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-    {{range .Animes}}
-      {{template "anime_card" .}}
-    {{end}}
-  </div>
-{{end}}
+<div class="flex flex-col gap-10">
+  {{if .ContinueWatching}}
+    {{template "continue_watching" .ContinueWatching}}
+  {{end}}
+
+  <section class="w-full">
+    <div class="mb-4 flex items-end justify-between">
+      <h2 class="text-lg font-normal text-neutral-300">Currently Airing</h2>
+      <a href="/browse?status=airing&order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-neutral-400 transition-colors hover:text-white">
+        See more
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
+      </a>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
+      {{range .CurrentlyAiring}}
+        {{template "anime_card" dict "Anime" . "WithActions" true}}
+      {{end}}
+    </div>
+  </section>
+
+  <section class="w-full">
+    <div class="mb-4 flex items-end justify-between">
+      <h2 class="text-lg font-normal text-neutral-300">Most Popular</h2>
+      <a href="/browse?order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-neutral-400 transition-colors hover:text-white">
+        See more
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
+      </a>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
+      {{range .MostPopular}}
+        {{template "anime_card" dict "Anime" . "WithActions" true}}
+      {{end}}
+    </div>
+  </section>
+</div>
+{{end}}