<template> <v-skeleton-loader v-if="loading" type="card" /> <v-card v-else class="text-center"> <v-card-text> <div class="text-h2"> {{ tardinessCount }} </div> <div class="text-subtitle-2"> {{ $tc("alsijil.personal_notes.tardiness_n", tardinessCount) }} </div> <div class="text-subtitle-2"> <!-- TODO: Show average tardiness instead of sum like mock-up? --> {{ tardinessSum }} </div> </v-card-text> </v-card> </template> <script> export default { name: "StatisticsTardinessCard", props: { tardinessSum: { type: Number, required: true, }, tardinessCount: { type: Number, required: true, }, loading: { type: Boolean, required: false, default: false, }, }, }; </script>