<template>
  <teleport to="#header-accompanying_course-name #banner-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' ||
        accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT' ||
        accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'
      "
      class="text-md-end"
    >
      <span
        v-if="accompanyingCourse.step === 'CONFIRMED'"
        class="d-md-block mb-md-3"
      >
        <span class="badge bg-primary">
          {{ $t("course.step.active") }}
        </span>
      </span>
      <span
        v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT'"
        class="d-md-block mb-md-3"
      >
        <span class="badge bg-chill-yellow text-primary">
          {{ $t("course.step.inactive_short") }}
        </span>
      </span>
      <span
        v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'"
        class="d-md-block mb-md-3"
      >
        <span class="badge bg-chill-pink">
          {{ $t("course.step.inactive_long") }}
        </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-name #persons-associated-shortlist">
    <persons-associated
      :accompanyingCourse="accompanyingCourse"
      :shortlist="true"
    ></persons-associated>
  </teleport>

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

  <teleport to="#header-accompanying_course-details #banner-persons-associated">
    <persons-associated
      :accompanying-course="accompanyingCourse"
      :shortlist="false"
    />
  </teleport>
</template>

<script>
import ToggleFlags from "./Banner/ToggleFlags";
import SocialIssue from "./Banner/SocialIssue.vue";
import PersonsAssociated from "./Banner/PersonsAssociated.vue";

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