<script setup>
import { substitutionsForDate, selectedDate } from "../store";
import { getSubstitutionText, getSubstitutionColor } from "../util";
import { computed } from "vue";

const substitutions = computed(() => {
  return substitutionsForDate.value[selectedDate.value.setUTCHours(0, 0, 0, 0)];
});
</script>

<template>
  <div class="substitutions">
    <template v-for="substitution in substitutions" :key="substitution">
      <div class="substitution" :style="getSubstitutionColor(substitution)">
        <span class="hour">{{ substitution.lesson }}</span>
        <div class="infos">
          <span class="text">{{
            $t(getSubstitutionText(substitution), {
              subject: substitution.change.subject,
              class: substitution.class.join(", "),
              teacher: substitution.change.teacher || substitution.teacher,
              room: substitution.change.room,
            })
          }}</span>
          <span class="notes" v-if="substitution.notes">
            {{ $t("timetable.notes") }} {{ substitution.notes }}
          </span>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.substitutions {
  padding: 0px 10px 80px 10px;
}

.substitution {
  display: grid;
  background-color: var(--substitution-background-unchanged);
  min-height: 50px;
  border-radius: 11px;
  margin: 10px 0px;
  padding: 10px 15px;
  grid-template-columns: max-content auto;
  gap: 15px;
}

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

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

.text {
  font-size: 18px;
  display: flex;
  align-items: center;
  word-wrap: break-word;
}

.notes {
  font-size: 13px;
  font-weight: 100;
}
</style>
