<script setup>
import TimetableCard from "@/components/settings/timetable-card.vue";
import { timetables, timetableId } from "@/store";
</script>

<template>
  <h2>{{ $t("settings.heading.remoteTimetables") }}</h2>
  <div class="list">
    <TimetableCard
      v-for="timetable in timetables"
      :key="timetable.id"
      :timetable="timetable"
      :selected="timetableId == timetable.id"
      :editable="true"
      @click="timetableId = timetable.id"
    />
  </div>
</template>

<style scoped>
h2 {
  margin: 5px 0px;
}

p {
  margin: 5px 0px;
}

.list {
  display: grid;
  gap: 8px;
}
</style>
