<template>
   <div class="vue-component">
      <h3>{{ $t('course.title') }}</h3>
      <dl>
         <dt>{{ $t('course.id') }}</dt>
            <dd>{{ accompanyingCourse.id }}</dd>
         <dt>{{ $t('course.opening_date') }}</dt>
            <dd>{{ $d(accompanyingCourse.openingDate.datetime, 'short') }}</dd>
         <dt>{{ $t('course.closing_date') }}</dt>
            <dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
         <dt>{{ $t('course.remark') }}</dt>
            <dd>{{ accompanyingCourse.remark }}</dd>
         <dt>{{ $t('course.closing_motive') }}</dt>
            <dd>{{ accompanyingCourse.closing_motive }}</dd>
      </dl>
   </div>
</template>

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