building Confirm component

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue

@@ -1,11 +1,45 @@
 <template>
   <div class="vue-component">
-     <h3>{{ $t('confirm.title') }}</h3>
+     <h3>
+        {{ $t('confirm.title') }}
+        <span v-if="accompanyingCourse.step !== 'DRAFT'"
+           class="badge badge-pill badge-primary">
+           {{ $t('course.step.active') }}</span>
+        <span v-else class="badge badge-pill badge-secondary">
+           {{ $t('course.step.draft') }}</span>
+     </h3>
+     
+     <p v-if="accompanyingCourse.step === 'DRAFT'">
+        {{ $t('confirm.text_draft') }}
+     </p>
+     
+     <dl>
+        <dt>{{ $t('course.closing_date') }}</dt>
+        <dd v-if="accompanyingCourse.closingDate">{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
+           
+        <dt>{{ $t('course.closing_motive') }}</dt>
+        <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
+     </dl>
+     
+     <button class="sc-button bt-save"
+         @click="confirmCourse">
+         {{ $t('confirm.ok') }}
+     </button>
   </div>
 </template>
 
 <script>
 export default {
    name: "Confirm",
+   computed: {
+      accompanyingCourse() {
+         return this.$store.state.accompanyingCourse
+      }
+   },
+   methods: {
+      confirmCourse() {
+         console.log('confirmCourse');
+      }
+   }
 }
 </script>