uwu tooling ftw (MUAHAHAHAHAHA ONE MUST CONFRONT THE BUN-- TYPE-SCRIPT (get it)

public/templates/card.html

@@ -0,0 +1,42 @@
+{{ define "card" }}
+<div
+    id="{{ .ID }}"
+    class="relative w-full h-full max-w-5xl mx-auto bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl shadow-2xl text-white p-5 overflow-hidden flex flex-col"
+>
+    <div
+        class="flex-grow flex items-center justify-center overflow-hidden rounded-xl"
+    >
+        <img
+            src="https://image.tmdb.org/t/p/original{{ .PosterPath }}"
+            alt="{{ .Title }}"
+            class="rounded-t-lg"
+        />
+    </div>
+
+    <div class="flex-none pt-4">
+        <div class="flex-auto min-h-0 flex flex-col">
+            <h5 class="text-2xl font-bold leading-tight mb-2">
+                {{ .Title }} ({{ .ReleaseDate }}) - {{ .VoteAverage }}/10
+            </h5>
+            <p class="text-sm text-gray-200">{{ .Overview }}</p>
+            <div
+                id="providers"
+                hx-trigger="load"
+                hx-swap="outerHTML"
+                hx-get="/api/providers/watch/{{ .ID }}?countryCode=US"
+                class="flex w-screen justify-center pt-1"
+            ></div>
+        </div>
+    </div>
+</div>
+<div class="fixed inset-0 pointer-events-none -z-10">
+    <img
+        src="https://image.tmdb.org/t/p/original{{ .PosterPath }}"
+        alt="Backdrop"
+        class="w-full h-full object-cover blur-3xl scale-110 opacity-60"
+    />
+    <div
+        class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(51,65,85,0.4)_0%,rgba(30,41,59,0.6)_70%,rgba(17,24,39,0.8)_100%)] mix-blend-multiply"
+    ></div>
+</div>
+{{ end }}