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

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