<template>
  <div class="mb-12 grid grid-cols-icon-card gap-x-4 grid-areas-icon-card">
    <it-icon-calendar-light class="w-[60px] grid-in-icon" />
    <h2 class="text-large font-bold grid-in-title">{{ $t("a.Datum") }}</h2>
    <p class="grid-in-value">
      {{
        formatDueDate(
          props.attendanceCourse.due_date?.start ?? "",
          props.attendanceCourse.due_date?.end
        )
      }}
    </p>
  </div>
  <div class="mb-12 grid grid-cols-icon-card gap-x-4 grid-areas-icon-card">
    <it-icon-location class="w-[60px] grid-in-icon" />
    <h2 class="text-large font-bold grid-in-title">{{ $t("a.Standort") }}</h2>
    <p v-if="location.startsWith('https://')" class="grid-in-value">
      <a class="link" target="_blank" :href="location">{{ location }}</a>
    </p>
    <p v-else class="grid-in-value">{{ location }}</p>
  </div>
  <div class="grid grid-cols-icon-card content-between gap-x-4 grid-areas-icon-card">
    <it-icon-trainer class="w-[60px] grid-in-icon" />
    <h2 class="text-large font-bold grid-in-title">{{ $t("a.Trainer") }}</h2>
    <p class="grid-in-value">{{ trainer }}</p>
  </div>
</template>

<script setup lang="ts">
import { formatDueDate } from "@/components/dueDates/dueDatesUtils";
import { computed } from "vue";
import type { CourseSessionAttendanceCourseObjectType } from "@/gql/graphql";

export interface Props {
  attendanceCourse: CourseSessionAttendanceCourseObjectType;
}

const props = defineProps<Props>();

const location = computed(() => props.attendanceCourse.location);
const trainer = computed(() => props.attendanceCourse.trainer);
</script>
