<script setup>
import TimetableSetup from "@/components/timetable-setup.vue";
import {
  classList,
  activeProfile,
  timetable,
  loadingFailed,
  loading,
} from "@/store";
import DayCarousel from "@/components/day-carousel.vue";
import TimetableList from "@/components/timetable-list.vue";
import InfoCard from "@/components/info-card.vue";
import { ClockIcon, CloudOffIcon, CalendarOffIcon } from "lucide-vue-next";
</script>

<template>
  <TimetableSetup
    v-show="activeProfile.classFilter == 'none'"
    :options="classList"
    v-model="activeProfile.classFilter"
  />
  <div
    class="cardContainer"
    v-show="
      (timetable.data || []).length == 0 && activeProfile.classFilter != 'none'
    "
  >
    <InfoCard
      class="card"
      v-if="!loadingFailed && loading"
      :icon="ClockIcon"
      :title="$t('infoCard.titles.loading')"
      :text="$t('infoCard.texts.loadingTimetable')"
    />
    <InfoCard
      class="card"
      v-else-if="!loadingFailed && !loading"
      :icon="CalendarOffIcon"
      :title="$t('infoCard.titles.noTimetable')"
      :text="$t('infoCard.texts.noTimetable')"
    />
    <InfoCard
      class="card"
      v-else
      :icon="CloudOffIcon"
      :title="$t('infoCard.titles.loadingFailed')"
      :text="$t('infoCard.texts.loadingFailed')"
    />
  </div>
  <DayCarousel
    v-show="activeProfile.classFilter != 'none'"
    :element="TimetableList"
  />
</template>

<style scoped>
.cardContainer {
  position: relative;
}

.card {
  padding: 10px;
}
</style>
