<template>
  <div
    class="d-flex align-center justify-space-between justify-md-end flex-wrap gap"
  >
    <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
    <v-chip dense color="success">
      <v-chip small dense class="mr-2" color="green darken-3 white--text"
        >{{ documentation.participations.length }}</v-chip
      >
      Schüler
    </v-chip>
    <v-chip dense color="warning">
      <v-chip small dense class="mr-2" color="orange darken-3 white--text"
        >3</v-chip
      >
      entschuldigt
    </v-chip>
    <v-chip dense color="error">
      <v-chip small dense class="mr-2" color="red darken-3 white--text"
        >1</v-chip
      >
      unentschuldigt
    </v-chip>
    <v-chip dense color="grey lighten-1">
      <v-chip small dense class="mr-2" color="grey darken-1 white--text"
        >4</v-chip
      >
      Hausaufgaben vergessen
    </v-chip>
    <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
    <manage-students-trigger v-bind="documentationPartProps" />
  </div>
</template>

<script>
import documentationPartMixin from "./documentationPartMixin";
import ManageStudentsTrigger from "../absences/ManageStudentsTrigger.vue";

export default {
  name: "LessonNotes",
  components: { ManageStudentsTrigger },
  mixins: [documentationPartMixin],
};
</script>

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