Show tardiness in lesson notes

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonNotes.vue

 <script setup>
 import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
 import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue";
+import TardinessChip from "../personal_notes/TardinessChip.vue";
 </script>
 
 <template>
@@ -64,6 +65,27 @@ import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue";
       </template>
     </extra-mark-chip>
 
+    <tardiness-chip>
+      {{ $t("alsijil.personal_notes.late") }}
+
+      <template #append>
+        <span>:
+          {{
+            tardyParticipations
+              .slice(0, 5)
+              .map((participation) => participation.person.firstName)
+              .join(", ")
+          }}
+
+          <span v-if="tardyParticipations.length > 5">
+            <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+            +{{ tardyParticipations.length - 5 }}
+            <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+          </span>
+        </span>
+      </template>
+    </tardiness-chip>
+
     <manage-students-trigger v-bind="documentationPartProps" />
   </div>
 </template>
@@ -111,6 +133,10 @@ export default {
         return value;
       }, {});
     },
+    tardyParticipations() {
+      return this.documentation.participations.filter(p =>
+          p.noteWithTardiness != null && p.noteWithTardiness.tardiness > 0);
+    },
   },
 };
 </script>