feat [front]: admin display registered movie

front/css/app.sass

@@ -1,6 +1,6 @@
 /* The utilities that cannot be used after compiling
  should be in tools.sass and not in app.sass */
-@import "./tools.sass"
+@import "./tools"
 
 // Import only what you need from Bulma
 @import "bulma/sass/base/_all"
@@ -11,6 +11,7 @@
 @import "bulma/sass/elements/container"
 @import "bulma/sass/elements/title"
 @import "bulma/sass/elements/image"
+@import "bulma/sass/elements/tag"
 @import "bulma/sass/form/_all"
 @import "bulma/sass/components/navbar"
 @import "bulma/sass/layout/section"

front/pages/admin/[id]/index.vue

@@ -1,5 +1,99 @@
-<template></template>
+<template>
+  <div class="title is-2">
+    <div class="tag is-large">
+      {{ film.isConfirmed ? "Publié" : "Brouillon" }}
+    </div>
+    <h1 class="mx-5">
+      {{ film.projectionDate || "À planifier" }} - {{ film.title }}
+      <span class="has-text-grey-lighter">#{{ film.id }}</span>
+    </h1>
+    <nuxt-link :to="`${id}/edition`" class="button">
+      <span>Éditer</span>
+    </nuxt-link>
+  </div>
+  <div class="field is-grouped is-grouped-multiline">
+    <div v-for="(tag, index) of tags" :key="index" class="control">
+      <div class="tags has-addons are-medium">
+        <span v-if="tag.label" class="tag">{{ tag.label }}</span>
+        <span class="tag is-info">{{ tag.value }}</span>
+      </div>
+    </div>
+  </div>
+  <div class="columns">
+    <div class="column">
+      <h2 class="title is-3">Synopsis</h2>
+      {{ film.synopsis }}
+    </div>
+    <div class="column">
+      <h2 class="title is-3">Acteurs</h2>
+      <ul>
+        <li v-for="(actor, index) of film.actors" :key="index">
+          {{ actor }}
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="columns">
+    <div class="column">
+      <iframe
+        v-if="film.trailerLink"
+        :src="film.trailerLink"
+        width="560"
+        height="315"
+        frameborder="0"
+        allowfullscreen="allowfullscreen"
+      />
+      <template v-else>Bande annonce non renseignée</template>
+    </div>
+    <div class="column">
+      <img
+        class="alignnone wp-image-1873 size-medium"
+        :src="film.posterLink"
+        alt="affiche du film"
+        width="300"
+        height="300"
+      />
+    </div>
+    <div class="column">
+      <img
+        class="alignnone wp-image-1873 size-medium"
+        :src="film.bannerLink"
+        alt="bannière du film"
+        width="300"
+        height="300"
+      />
+    </div>
+  </div>
+</template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Film } from "~/composables/types"
 
-<style scoped lang="sass"></style>
+definePageMeta({
+  layout: "admin",
+})
+const route = useRoute()
+const id = route.params.id
+
+const film = reactive<Film>({})
+
+Object.assign(film, (await apiGet(`films/${id}/`)).data.value)
+
+const tags = computed(() => {
+  const base = [
+    { label: "Durée", value: film.duration },
+    { label: "Pays d'origine", value: film.originCountry },
+    { label: "Année de sortie", value: film.releaseYear },
+    { value: film.isInColor ? "Couleur" : "Noir et blanc" },
+    { label: "Format", value: film.movieFormat },
+    { value: film.languageSubtitles },
+  ]
+  return base.filter((tag) => tag.value)
+})
+</script>
+
+<style scoped lang="sass">
+.title
+  display: flex
+  align-items: center
+</style>