<script setup>
import { parsedTimetable } from "../store";
import { dayNames } from "../definitions";
import { ref } from "vue";

const timetableDay = ref(0);
</script>
<template>
  <div class="timetable">
    <div class="title">
      <span class="day">{{ dayNames[timetableDay] }}</span>
    </div>

    <template
      v-for="(lesson, index) in parsedTimetable[timetableDay]"
      :key="index"
    >
      <div class="lesson">
        <span class="hour">{{ index + 1 }}</span>
        <div class="infos">
          <span class="subject">{{ lesson.subject }}</span>
          <span class="info">{{ lesson.teacher }}, {{ lesson.room }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.timetable {
  padding: 65px 10px 80px 10px;
}

.title {
  font-size: 18px;
  text-align: center;
}

.lesson {
  display: grid;
  background-color: #26272a;
  height: 60px;
  border-radius: 11px;
  margin: 10px 0px;
  padding: 10px 15px;
  grid-template-columns: max-content max-content;
  gap: 15px;
}

.hour {
  font-size: 30px;
  display: flex;
  align-items: center;
}

.infos {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.infos .subject {
  font-weight: bold;
  font-size: 18px;
}

.infos .info {
  font-weight: 200;
  font-size: 14px;
}
</style>
