<script setup lang="ts">
import { type ClassesResponseClass } from '@/api/classroom_compliance'
import { useRouter } from 'vue-router';

defineProps<{
  cls: ClassesResponseClass
}>()
const router = useRouter()
</script>
<template>
  <div class="class-item" @click="router.push(`/classroom-compliance/classes/${cls.id}`)">
    <h3>Class <span v-text="cls.number"></span>&nbsp;<span v-text="cls.schoolYear"
        style="font-weight: lighter; font-size: small;"></span>
    </h3>
    <p>
      {{ cls.studentCount }} students,
      {{ cls.entryCount }} entries.
      <span v-if="cls.entryCount > 0">Last entry from {{ cls.lastEntryDate }}.</span>
    </p>
  </div>
</template>
<style scoped>
.class-item {
  border: 2px solid;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.class-item:hover {
  border: 2px dashed;
}

.class-item+.class-item {
  margin-top: 1em;
}

.class-item>h3 {
  margin-top: 0;
}
</style>
