<script setup lang="ts">
import * as log from "loglevel";
import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue";
import { useCourseSessionsStore } from "@/stores/courseSessions";

const courseSessionsStore = useCourseSessionsStore();

log.debug("LearningContentContainer.vue setup");

defineEmits(["exit"]);
</script>

<template>
  <div>
    <div class="absolute bottom-0 left-0 top-0 w-full bg-white">
      <CoursePreviewBar v-if="courseSessionsStore.hasCourseSessionPreview" />
      <div
        :class="{
          'h-content': !courseSessionsStore.hasCourseSessionPreview,
          'h-content-preview': courseSessionsStore.hasCourseSessionPreview,
        }"
        class="overflow-y-auto"
      >
        <header
          class="relative flex h-12 w-full items-center justify-between bg-white px-4 lg:h-16 lg:px-8"
        >
          <button
            type="button"
            class="absolute right-2 top-2 h-8 w-8 cursor-pointer lg:right-4 lg:top-4"
            data-cy="close-learning-content"
            @click="$emit('exit')"
          >
            <it-icon-close></it-icon-close>
          </button>
        </header>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$nav-height: 86px; // navigation height
$nav-height-preview: $nav-height + 64px; //navigation height + preview bar height

.h-content {
  height: calc(100vh - $nav-height);
}

.h-content-preview {
  height: calc(100vh - $nav-height-preview);
}

.nav {
  height: $nav-height;
}
</style>
