SubstitutionInformation.vue

<script setup>
import SubstitutionStatus from "./SubstitutionStatus.vue";

import { DateTime } from "luxon";
</script>

<template>
  <div class="full-width grid">
    <div class="d-flex">
      <substitution-status :substitution="substitution" />
      <div class="text-right d-flex flex-column fit-content">
        <time :datetime="substitution.datetimeStart" class="text-no-wrap">
          {{ $d(toDateTime(substitution.datetimeStart), "shortTime") }}
        </time>
        <time :datetime="substitution.datetimeEnd" class="text-no-wrap">
          {{ $d(toDateTime(substitution.datetimeEnd), "shortTime") }}
        </time>
      </div>
    </div>
    <span class="text-subtitle-1 font-weight-medium">
      {{ course?.name }}
    </span>
  </div>
</template>

<script>
export default {
  name: "SubstitutionInformation",
  props: {
    substitution: {
      type: Object,
      required: true,
    },
  },
  methods: {
    toDateTime(dateString) {
      return DateTime.fromISO(dateString);
    },
  },
  computed: {
    course() {
      if (this.substitution.course) {
        return this.substitution.course;
      } else if (this.substitution.amends?.course) {
        return this.substitution.amends.course;
      }
      return undefined;
    },
  },
};
</script>

<style scoped>
.grid {
  display: grid;
  align-items: center;
  gap: 1em;
  grid-template-columns: 1fr 1fr;
  align-content: unset;
}

.grid:last-child {
  justify-self: end;
  justify-content: end;
}

.fit-content {
  width: fit-content;
}

.gap {
  gap: 0.25em;
}
</style>