<script setup>
import ScrollableContainer from "@/components/scrollable-container.vue";
import PageCard from "@/components/settings/page-card.vue";
import {
  FilterIcon,
  CalendarIcon,
  CopyCheckIcon,
  PaletteIcon,
  InfoIcon,
  ChevronLeft,
} from "lucide-vue-next";
</script>

<template>
  <ScrollableContainer class="settings">
    <div class="wrapper" v-if="$route.name == 'title.settings.main'">
      <div class="cards">
        <PageCard
          :name="$t('title.settings.filtering')"
          :icon="FilterIcon"
          route="settings/filtering"
        />
        <PageCard
          :name="$t('title.settings.timetable')"
          :icon="CalendarIcon"
          route="settings/timetable"
        />
        <PageCard
          :name="$t('title.settings.groups')"
          :icon="CopyCheckIcon"
          route="settings/groups"
        />
        <PageCard
          :name="$t('title.settings.appearance')"
          :icon="PaletteIcon"
          route="settings/appearance"
        />
        <PageCard
          :name="$t('title.settings.about')"
          :icon="InfoIcon"
          route="settings/about"
        />
      </div>
    </div>
    <div class="subroute" v-else>
      <RouterLink to="/settings" class="back">
        <ChevronLeft />
        <span>{{ $t("settings.back") }}</span>
      </RouterLink>
      <RouterView />
    </div>
  </ScrollableContainer>
</template>

<style scoped>
.settings {
  padding: 20px 10px 0px 10px;
}

.wrapper {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.cards {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  gap: 10px;
}

.back {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  width: max-content;
  text-decoration: unset;
  color: unset;
  margin-bottom: 8px;
}
</style>
