<script setup lang="ts">

import * as log from 'loglevel';

import {onMounted} from 'vue'
import {useLearningPathStore} from '@/stores/learningPath';
import {useUserStore} from '@/stores/user';

import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';


log.debug('LearningPathView created');

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

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

onMounted(async () => {
  log.info('LearningPathView mounted');
  await learningPathStore.loadLearningPath(props.learningPathSlug);
});

</script>

<template>
  <div class="bg-gray-100" v-if="learningPathStore.learningPath">

    <div class="learningpath flex flex-col">
      <div class="flex flex-col h-max">
        <div class="bg-white py-8">
          <LearningPathDiagram class="max-w-[1680px] w-full"></LearningPathDiagram>
        </div>

        <h1 class="m-12">{{ learningPathStore.learningPath.title }}</h1>

        <div class="bg-white m-12 p-8 flex flex-row  justify-start">
          <div class="p-8 flex-auto">
            <h2>Willkommmen zurück, {{userStore.first_name}}</h2>
            <p class="mt-4 text-xl">
              Du hast bereits drei circles bearbeitet, mach weiter so!
            </p>
          </div>
          <div class="p-8  border-l border-gray-500 flex-1">
            Nächster Schirtt
            <h3>Analyse: Anwenden</h3>
            <router-link class="mt-4 btn-blue" to="/circle/analyse">
              Los geht's
            </router-link>
          </div>

        </div>
        <div class="topic"></div>


      </div>


    </div>
  </div>
</template>

<style scoped>
</style>
