<template>
  <banner />
  <sticky-nav />

  <h1 v-if="accompanyingCourse.step === 'DRAFT'">
    {{ $t("course.title.draft") }}
  </h1>
  <h1 v-else>
    {{ $t("course.title.active") }}
  </h1>

  <persons-associated />
  <course-location />
  <origin-demand />
  <admin-location />
  <requestor :is-anonymous="accompanyingCourse.requestorAnonymous" />
  <social-issue />
  <scopes />
  <referrer />
  <resources />
  <start-date v-if="accompanyingCourse.step.startsWith('CONFIRMED')" />
  <comment v-if="accompanyingCourse.step === 'DRAFT'" />
  <confirm v-if="accompanyingCourse.step === 'DRAFT'" />

  <!-- <div v-for="error in errorMsg" v-bind:key="error.id" class="vue-component errors alert alert-danger">
       <p>
          <span>{{ error.sta }} {{ error.txt }}</span><br>
          <span>{{ $t(error.msg) }}</span>
       </p>
    </div> -->
</template>
<script>
import { mapState } from "vuex";
import Banner from "./components/Banner.vue";
import StickyNav from "./components/StickyNav.vue";
import OriginDemand from "./components/OriginDemand.vue";
import AdminLocation from "./components/AdminLocation.vue";
import PersonsAssociated from "./components/PersonsAssociated.vue";
import Requestor from "./components/Requestor.vue";
import SocialIssue from "./components/SocialIssue.vue";
import CourseLocation from "./components/CourseLocation.vue";
import Scopes from "./components/Scopes.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";
import StartDate from "./components/StartDate.vue";

export default {
  name: "App",
  components: {
    Banner,
    StickyNav,
    OriginDemand,
    AdminLocation,
    PersonsAssociated,
    Requestor,
    SocialIssue,
    CourseLocation,
    Scopes,
    Referrer,
    Resources,
    Comment,
    Confirm,
    StartDate,
  },
  computed: {
    ...mapState(["accompanyingCourse", "addressContext"]),
  },
};
</script>

<style lang="scss">
@import "ChillMainAssets/module/bootstrap/shared";
$chill-accourse-context: #718596;

div#accompanying-course {
  div.vue-component {
    h2 {
      margin: 1em 0.7em;
      position: relative;
      &:before {
        position: absolute;
        content: "\f142"; //ellipsis-v
        font-family: "ForkAwesome";
        color: tint-color($chill-accourse-context, 10%);
        left: -22px;
        top: 4px;
      }
      a[id^="section"] {
        position: absolute;
        top: -2.5em; // reference for stickNav
      }
    }
    padding: 0em 0em;
    margin: 1em 0;
    border-radius: 5px;
    border: 1px dotted tint-color($chill-accourse-context, 10%);
    border-left: 1px dotted tint-color($chill-accourse-context, 10%);
    border-right: 1px dotted tint-color($chill-accourse-context, 10%);
    dd {
      margin-left: 1em;
    }
    & > div {
      margin: 1em 3em 0;

      &.flex-table,
      &.flex-bloc {
        margin: 1em 0 0;
      }
      &.alert.to-confirm {
        margin: 1em 0 0;
        padding: 1em 3em;
      }
    }

    div.flex-table {
      div.item-row {
        div.item-col:first-child {
          flex-basis: 33%;
        }
      }
    }

    &.errors {
      //display: flex;
      //position: sticky;
      //bottom: 0.3em;
      //z-index: 1000;
      margin: 1em 0;
      padding: 1em;
      border-radius: 0;
    }
  }
}
</style>
