Updated movie page to show crew titles

handler/movie.go

@@ -31,7 +31,14 @@ func Movie(
 					Msg("Error occured getting the movie")
 				return
 			}
-			page.Movie(movie, &config.TMDBConfig.Image).Render(r.Context(), w)
+			credits, err := tmdb.GetCredits(int32(movie_id), config.TMDBToken)
+			if err != nil {
+				ErrorPage(http.StatusInternalServerError, w, r)
+				logger.Error().Err(err).Int32("movie_id", int32(movie_id)).
+					Msg("Error occured getting the movie credits")
+				return
+			}
+			page.Movie(movie, credits, &config.TMDBConfig.Image).Render(r.Context(), w)
 		},
 	)
 }

view/page/movie.templ

@@ -3,17 +3,55 @@ package page
 import "projectreshoot/tmdb"
 import "projectreshoot/view/layout"
 
-templ Movie(movie *tmdb.Movie, image *tmdb.Image) {
+templ Movie(movie *tmdb.Movie, credits *tmdb.Credits, image *tmdb.Image) {
 	@layout.Global() {
-		<div class="bg-surface0 md:p-2 md:rounded-lg">
+		<div class="md:bg-surface0 md:p-2 md:rounded-lg transition-all">
-			<div class="flex items-center">
+			<div
-				<div class="bg-overlay2 rounded-lg">
+				id="billedcrew"
+				class="hidden"
+			>
+				for _, billedcrew := range credits.BilledCrew() {
+					<span class="flex flex-col text-left w-[130px] md:w-[180px]">
+						<span class="font-bold">{ billedcrew.Name }</span>
+						<span class="text-subtext1">{ billedcrew.FRoles() }</span>
+					</span>
+				}
+			</div>
+			<div class="flex items-start">
+				<div class="w-[154px] md:w-[300px] flex-col">
 					<img
 						class="object-cover aspect-[2/3] w-[154px] md:w-[300px] 
-                        transition-all md:rounded-md shadow-crust shadow-2xl"
+                        transition-all md:rounded-md shadow-black shadow-2xl"
 						src={ movie.GetPoster(image, "w300") }
 						alt="Poster"
 					/>
+					<div
+						id="billedcrew-sm"
+						class="text-sm md:text-lg text-subtext1 flex gap-6
+                        mt-5 flex-wrap justify-around flex-col px-5 md:hidden"
+					></div>
+					<script>
+                        function moveBilledCrew() {
+                            const billedCrewMd = document.getElementById('billedcrew-md');
+                            const billedCrewSm = document.getElementById('billedcrew-sm');
+                            const billedCrew = document.getElementById('billedcrew');
+
+                            if (window.innerWidth < 768) {
+                                billedCrewSm.innerHTML = billedCrew.innerHTML;
+                                billedCrewMd.innerHTML = "";
+                            } else {
+                                billedCrewMd.innerHTML = billedCrew.innerHTML;
+                                billedCrewSm.innerHTML = "";
+                            }
+                        }
+
+                        window.addEventListener('load', moveBilledCrew);
+
+                        const resizeObs = new ResizeObserver(() => {
+                            moveBilledCrew();
+                        });
+                        resizeObs.observe(document.body);
+                    </script>
 				</div>
 				<div class="flex flex-col flex-1 text-center px-4">
 					<span class="text-xl md:text-3xl font-semibold">
@@ -21,8 +59,8 @@ templ Movie(movie *tmdb.Movie, image *tmdb.Image) {
 					</span>
 					<span class="text-sm md:text-lg text-subtext1">
 						{ movie.FGenres() }
-						- { movie.FRuntime() }
+						&#x2022; { movie.FRuntime() }
-						- { movie.ReleaseYear() }
+						&#x2022; { movie.ReleaseYear() }
 					</span>
 					<div class="flex justify-center gap-2 mt-2">
 						<div
@@ -34,6 +72,20 @@ templ Movie(movie *tmdb.Movie, image *tmdb.Image) {
                             transition-all rounded-sm"
 						></div>
 					</div>
+					<div class="flex flex-col mt-4">
+						<span class="text-sm md:text-lg text-overlay2 italic">
+							{ movie.Tagline }
+						</span>
+						<div
+							id="billedcrew-md"
+							class="hidden text-sm md:text-lg text-subtext1 md:flex gap-6
+                            mt-5 flex-wrap justify-around"
+						></div>
+						<span class="text-lg mt-5 font-semibold">Overview</span>
+						<span class="text-sm md:text-lg text-subtext1">
+							{ movie.Overview }
+						</span>
+					</div>
 				</div>
 			</div>
 		</div>