<script setup lang="ts">
import { useLearningPathStore } from "@/stores/learningPath";
import { useUserStore } from "@/stores/user";
import * as log from "loglevel";

import LearningPathDiagram from "@/components/circle/LearningPathDiagram.vue";
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";

log.debug("LearningPathView created");

const props = defineProps<{
  learningPathSlug: string;
  show: boolean;
}>();

const learningPathStore = useLearningPathStore();
const userStore = useUserStore();

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