<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="text-md-end d-md-block">
         <span class="badge bg-secondary">
            {{ $t('course.step.draft') }}
         </span>
      </span>
      <span v-else-if="accompanyingCourse.step === 'CONFIRMED'" 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">
               <span class="item-key">{{ $t('course.referrer') }}:</span>&nbsp;
               <b>{{ accompanyingCourse.user.text }}</b>
               <template v-if="accompanyingCourse.user.isAbsent">
                 &nbsp;
                 <span class="badge bg-danger rounded-pill" title="Absent">A</span>
               </template>
            </span>
         </span>
      </span>
      <span v-else class="text-md-end d-md-block">
         <span class="badge bg-danger">
            {{ $t('course.step.closed') }}
         </span>
         <span class="d-md-block">
            <span class="d-md-block ms-3 ms-md-0">
               <i>{{ $d(accompanyingCourse.openingDate.datetime, 'text') }} - {{ $d(accompanyingCourse.closingDate.datetime, 'text') }}</i>
            </span>
            <span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
               <span class="item-key">{{ $t('course.referrer') }}:</span> <b>{{ accompanyingCourse.user.text }}</b>
            </span>
         </span>
      </span>
   </teleport>

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

   <teleport to="#header-accompanying_course-details #banner-persons-associated">
      <persons-associated :accompanyingCourse="accompanyingCourse"></persons-associated>
   </teleport>

</template>

<script>
import ToggleFlags from './Banner/ToggleFlags';
import SocialIssue from './Banner/SocialIssue.vue';
import PersonsAssociated from './Banner/PersonsAssociated.vue';
import UserRenderBoxBadge from 'ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue';

export default {
   name: 'Banner',
   components: {
      ToggleFlags,
      SocialIssue,
      PersonsAssociated,
      UserRenderBoxBadge,
   },
   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>
