<script setup lang="ts">
import DueDatesList from "@/components/dueDates/DueDatesList.vue";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useDashboardStore } from "@/stores/dashboard";
import { getCockpitUrl } from "@/utils/utils";

const dashboardStore = useDashboardStore();
const courseSessionsStore = useCourseSessionsStore();
const allDueDates = courseSessionsStore.allDueDates();
</script>

<template>
  <template v-if="dashboardStore.currentDashboardConfig">
    <h4 class="mb-6 text-xl font-bold">{{ $t("a.Aktueller Lehrgang") }}</h4>

    <div class="mb-6 border border-gray-300 p-6">
      <h3 class="mb-6">{{ dashboardStore.currentDashboardConfig.name }}</h3>
      <router-link
        class="btn-blue"
        target="_blank"
        :to="getCockpitUrl(dashboardStore.currentDashboardConfig.slug)"
      >
        {{ $t("a.Cockpit anschauen") }}
      </router-link>
    </div>
  </template>

  <router-link
    v-if="dashboardStore.dashboardConfigs.length > 1"
    class="block text-sm underline"
    to="/statistic/list"
  >
    {{ $t("a.Alle Lehrgänge anzeigen") }}
  </router-link>

  <h3 class="mb-6 mt-16 text-xl font-bold">{{ $t("a.AlleTermine") }}</h3>
  <DueDatesList
    :due-dates="allDueDates"
    :max-count="13"
    :show-top-border="true"
    :show-all-due-dates-link="true"
    :show-bottom-border="true"
    :show-course-session="true"
  ></DueDatesList>
</template>
