<script setup lang="ts">
import { useCurrentCourseSession } from "@/composables";
import DueDateSingle from "@/components/dueDates/DueDateSingle.vue";
import { computed } from "vue";
import { useExpertCockpitStore } from "@/stores/expertCockpit";

const expertCockpitStore = useExpertCockpitStore();
const courseSession = useCurrentCourseSession();

const circleDates = computed(() => {
  const dueDates = courseSession.value.due_dates.filter((dueDate) => {
    if (!expertCockpitStore.currentCircle) return false;
    return expertCockpitStore.currentCircle.id == dueDate?.circle?.id;
  });
  return dueDates.slice(0, 4);
});
</script>

<template>
  <div class="flex flex-col space-y-2">
    <h3 class="heading-3">{{ $t("Nächste Termine") }}</h3>
    <div
      v-for="dueDate in circleDates"
      :key="dueDate.id"
      class="border-t border-gray-500 pt-2"
    >
      <DueDateSingle :due-date="dueDate" :single-line="true"></DueDateSingle>
    </div>
    <div v-if="circleDates.length === 0">{{ $t("dueDates.noDueDatesAvailable") }}</div>
  </div>
</template>
