chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue

<template>

   <teleport to="#header-accompanying_course-name #banner-flags">
      <toggle-flags></toggle-flags>
   </teleport>

   <teleport to="#header-accompanying_course-name #banner-status">
      <span v-if="accompanyingCourse.step === 'DRAFT'" class="d-md-block">
         <span class="badge bg-secondary">
            {{ $t('course.step.draft') }}
         </span>
      </span>
      <span v-else class="text-md-end">
         <span class="d-md-block mb-md-3">
            <span class="badge bg-primary">
               {{ $t('course.step.active') }}
            </span>
         </span>
         <span class="d-md-block">
            <span class="d-md-block ms-3 ms-md-0">
               <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
            </span>
            <span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
               {{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
            </span>
         </span>
      </span>
   </teleport>

   <teleport to="#header-accompanying_course-details #banner-social-issues">
      <div class="col-12">
         <social-issue
            v-for="issue in accompanyingCourse.socialIssues"
            v-bind:key="issue.id"
            v-bind:issue="issue">
         </social-issue>
      </div>
   </teleport>

</template>

<script>
import ToggleFlags from './Banner/ToggleFlags';
import SocialIssue from './Banner/SocialIssue.vue';

export default {
   name: 'Banner',
   components: {
      ToggleFlags,
      SocialIssue
   },
   computed: {
      accompanyingCourse() {
         return this.$store.state.accompanyingCourse
      }
   }
}
</script>

<style lang="scss">
   div#banner-flags,
   div#banner-status {
      .badge {
         text-transform: uppercase;
      }
   }
   div#banner-status {
      span.badge {
         font-size: 90%;
      }
   }
</style>