package search

import "fmt"
import "git.haelnorr.com/h/golib/tmdb"

templ MovieResults(movies *tmdb.ResultMovies, image *tmdb.Image) {
	for _, movie := range movies.Results {
		<a
			href={ templ.SafeURL(fmt.Sprintf("/movie/%v", movie.ID)) }
			class="bg-surface0 p-4 rounded-lg shadow-lg flex 
            items-start space-x-4 cursor-pointer transition-all 
            hover:outline hover:outline-green hover:shadow-xl hover:scale-105"
		>
			<img
				src={ movie.GetPoster(image, "w92") }
				alt="Movie Poster"
				class="rounded-lg object-cover"
				width="96"
				height="144"
				onerror="this.onerror=null; setFallbackColor(this);"
			/>
			<script>
				function setFallbackColor(img) {
					const baseColor = getComputedStyle(document.documentElement)
						.getPropertyValue("--base")
						.trim();
					img.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='144'%3E%3Crect width='100%' height='100%' fill='${baseColor}'/%3E%3C/svg%3E`;
				}
			</script>
			<div>
				<h3 class="text-xl font-semibold">{ movie.Title } { movie.ReleaseYear() }</h3>
				<p class="text-subtext0">
					Released:
					<span class="font-medium">{ movie.ReleaseDate }</span>
				</p>
				<p class="text-subtext0">
					Original Title:
					<span class="font-medium">{ movie.OriginalTitle }</span>
				</p>
				<p class="text-subtext0">{ movie.Overview }</p>
			</div>
		</a>
	}
}