<script setup lang="ts">
import AttendanceCourse from "@/pages/learningPath/learningContentPage/attendanceCourse/AttendanceCourse.vue";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import type { LearningContentAttendanceCourse } from "@/types";
import { computed } from "vue";
import LearningContentSimpleLayout from "../layouts/LearningContentSimpleLayout.vue";

const courseSessionsStore = useCourseSessionsStore();

const props = defineProps<{
  content: LearningContentAttendanceCourse;
}>();

const courseSessionAttendanceCourse = computed(() => {
  return courseSessionsStore.findAttendanceCourse(props.content.id);
});
</script>

<template>
  <LearningContentSimpleLayout :title="content.title" :learning-content="props.content">
    <div class="container-medium">
      <div class="lg:mt-8">
        <div class="text-large my-4">
          <div v-if="courseSessionAttendanceCourse">
            <AttendanceCourse :attendance-course="courseSessionAttendanceCourse" />
          </div>
          <div v-else>
            Für diese Durchführung {{ content.id }} existieren noch keine Details
          </div>
        </div>
      </div>
    </div>
  </LearningContentSimpleLayout>
</template>
