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

defineProps<{
  cls: Class
}>()
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></h3>
    <p v-text="cls.schoolYear"></p>
  </div>
</template>
<style scoped>
.class-item {
  border: 2px solid;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  max-width: 500px;
}

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

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

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