<template>
  <v-card outlined dense rounded="lg" v-bind="$attrs" v-on="$listeners">
    <div class="font-weight-medium mr-2">
      {{ $t("alsijil.coursebook.summary.topic.label") }}:
    </div>
    <div class="text-truncate">{{ documentation.topic || "–" }}</div>

    <div class="font-weight-medium mr-2">
      {{ $t("alsijil.coursebook.summary.homework.label") }}:
    </div>
    <div class="text-truncate">{{ documentation.homework || "–" }}</div>

    <div class="font-weight-medium mr-2">
      {{ $t("alsijil.coursebook.summary.group_note.label") }}:
    </div>
    <div class="text-truncate">{{ documentation.groupNote || "–" }}</div>
  </v-card>
</template>

<script>
export default {
  name: "DocumentationCompactDetails",
  props: {
    documentation: {
      type: Object,
      required: true,
    },
  },
};
</script>