<template>
   <banner></banner>
   
   <h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
   <h1 v-else>{{ $t('course.title.active') }}</h1>
   
   <persons-associated></persons-associated>
   <requestor></requestor>
   <social-issue></social-issue>
   <referrer></referrer>
   <resources></resources>
   <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
   <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
   
</template>

<script>
import { mapState } from 'vuex'
import Banner from './components/Banner.vue';
import PersonsAssociated from './components/PersonsAssociated.vue';
import Requestor from './components/Requestor.vue';
import SocialIssue from './components/SocialIssue.vue';
import Referrer from './components/Referrer.vue';
import Resources from './components/Resources.vue';
import Comment from './components/Comment.vue';
import Confirm from './components/Confirm.vue';

export default {
   name: 'App',
   components: { 
      Banner,
      PersonsAssociated, 
      Requestor,
      SocialIssue,
      Referrer,
      Resources,
      Comment,
      Confirm,
   },
   computed: mapState([
      'accompanyingCourse'
   ])
};
</script>

<style lang="scss">
   h1 {
      margin: 1.5em 0;
   }
   div.vue-component {
      h2 {
         margin-left: 0.7em;
         position: relative;
         &:before {
            position: absolute;
            content: "\f192";
            font-family: "ForkAwesome";
            color: #718596ab;
            left: -28px;
            top: 4px;
         }
         a[name^="section"] {
            position: absolute;
            top: -2em;
         }
      }
      padding: 0.8em 0em;
      margin: 2em 0;
      border: 1px dotted #718596ab; 
      border-radius: 5px;
      border-left: 1px dotted #718596ab;
      border-right: 1px dotted #718596ab;
      /*
      position: relative; 
      &:before { 
         content: "vuejs component";
         position: absolute;
         left: 1.5em;
         top: -0.9em;
         background-color: white;
         color: grey;
         padding: 0 0.3em;
      }
      */
      dd { 
         margin-left: 1em; 
      }
      & > div {
         margin: 1em 3em 0;
      }
      table {
      }
   }
</style>
