<script setup lang="ts">
import * as log from "loglevel";

import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
import type { LearningPath } from "@/services/learningPath";

log.debug("LearningPathView created");

const props = defineProps<{
  learningPath: LearningPath | undefined;
  show: boolean;
}>();

const emits = defineEmits(["closemodal"]);
</script>
<template>
  <ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
    <div v-if="learningPath" class="container-medium">
      <h1>{{ learningPath.title }}</h1>
      <div class="learningpath flex flex-col">
        <div class="flex flex-col h-max">
          <LearningPathDiagram
            v-if="learningPath"
            class="w-full"
            :learning-path="learningPath"
            diagram-type="vertical"
          ></LearningPathDiagram>
        </div>
      </div>
    </div>
  </ItFullScreenModal>
</template>
<style scoped></style>
