Ajout du template pour les têtes d'affiches.

@@ -2,11 +2,11 @@
 //#region --import--.
 import { ArrowLeftIcon, FilmIcon } from "lucide-vue-next";
 import { useTMDB } from "~/composables/tMDB";
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { Movie } from "~/models/movie";
 import type { MovieInterface } from "~/interfaces/movie";
 import { Credit } from "~/models/credit";
-import type { CreditInterface, CreditsResponse } from "~/interfaces/credit";
+import type { CreditsResponse } from "~/interfaces/credit";
 //#endregion
 
 //#region --Declaration--.
@@ -46,6 +46,17 @@ const movie = computed(() => {
     return null;
   }
 });
+
+/**
+ * Computed property for director
+ */
+const director = computed(() => {
+  if (unref(movie)?.credit?.crew) {
+    return movie.value?.credit.crew.find((person) => person.job === "Director");
+  } else {
+    return null;
+  }
+});
 //#endregion
 
 //#region --Function--.
@@ -91,18 +102,17 @@ const formatVoteCount = (count: number) => {
   return `${count} votes`;
 };
 
-async function fetchCredits(id: number|string) {
+async function fetchCredits(id: number | string) {
   try {
-    const data = await fetchMovieCredits(id) as CreditsResponse;
+    const data = (await fetchMovieCredits(id)) as CreditsResponse;
     data.movie_id = id;
     // Add to store collection.
-    console.log('credit response', data)
-
     useRepo(Credit).save(data);
   } catch (error) {
     console.error("Error fetching movie credits:", error);
   }
 }
+
 //#endregion
 
 //#region --Global event--.
@@ -111,7 +121,7 @@ onMounted(() => {
   if (unref(movieId)) {
     const id = unref(movieId) as string | number;
     fetchDetails(id);
-    fetchCredits(id)
+    fetchCredits(id);
   }
   // loadComments()
 });
@@ -194,6 +204,18 @@ onMounted(() => {
               <h2 class="text-xl font-bold mb-2">Synopsis</h2>
               <p class="text-gray-300">{{ movie.overview || "Aucun synopsis disponible." }}</p>
             </div>
+
+            <!-- Réalisateur et têtes d'affiche -->
+            <div v-if="movie.credit" class="mb-6">
+              <h2 class="text-xl font-bold mb-2">Équipe</h2>
+              <div v-if="director" class="mb-2">
+                <span class="font-semibold">Réalisateur:</span> {{ director.name }}
+              </div>
+              <div v-if="movie.credit.cast.length > 0">
+                <span class="font-semibold">Têtes d'affiche:</span>
+                {{ movie.credit.cast.slice(0, 5).map(person => person.name).join(', ') }}
+              </div>
+            </div>
           </div>
         </div>
       </div>