<script setup lang="ts">
import type { EntriesResponseStudent } from '@/api/classroom_compliance';
defineProps<{
  student: EntriesResponseStudent,
  classId: number,
}>()
</script>
<template>
  <td class="student-name-cell" :class="{ 'student-removed': student.removed }">
    <RouterLink :to="'/classroom-compliance/classes/' + student.classId + '/students/' + student.id"
      class="student-link">
      {{ student.name }}
    </RouterLink>
    <div v-if="classId !== student.classId" class="other-class-text">
      <RouterLink :to="'/classroom-compliance/classes/' + student.classId">In another class</RouterLink>
    </div>
  </td>
</template>
<style scoped>
.student-name-cell {
  padding-left: 0.5em;
  text-align: left;
}

.student-link {
  text-decoration: none;
  color: inherit;
}

.student-link:hover {
  text-decoration: underline;
}

.student-removed {
  text-decoration: line-through;
  color: gray;
}

.other-class-text {
  font-size: x-small;
}

.other-class-text>a {
  color: gray;
  text-decoration: none;
}

.other-class-text>a:hover {
  text-decoration: underline;
}
</style>
