<template>
   <div class="vue-component" style="display: none;">
      <h3>{{ $t('course.title') }}</h3>
      <dl>
        <dt>{{ $t('course.id') }}</dt>
        <dd>{{ accompanyingCourse.id }}</dd>
     </dl>
   </div>
      
   <teleport to="#header-accompanying_course-name .grid-4">
      <toggle-flags></toggle-flags>
   </teleport>
      
   <teleport to="#header-accompanying_course-name .grid-3">
      <p style="text-align: right;">
         <span v-if="accompanyingCourse.openingDate">
            <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
         </span><br>
         <span v-if="accompanyingCourse.user">
            {{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
         </span>
      </p>
   </teleport>

</template>

<script>
import ToggleFlags from './ToggleFlags';

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