{{ 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 }}