<!-- Wrapper around DocumentationAbsences.vue -->
<!-- That uses it either as list item or as editable modal dialog. -->
<template>
  <mobile-fullscreen-dialog v-model="popup" max-width="500px">
    <template #activator="activator">
      <!-- list view -> activate dialog -->
      <documentation-absences compact v-bind="$attrs" :dialog-activator="activator" v-on="selectListeners" />
    </template>
    <!-- dialog view -> deactivate dialog -->
    <!-- cancel | save (through lesson-summary) -->
    <documentation-absences v-bind="$attrs" @close="popup = false" v-on="selectListeners" />
  </mobile-fullscreen-dialog>
</template>

<script>
import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
import DocumentationAbsences from "./DocumentationAbsences.vue";

import selectParticipationMixin from "./selectParticipationMixin.js";

export default {
  name: "DocumentationAbsencesModal",
  components: {
    MobileFullscreenDialog,
    DocumentationAbsences,
  },
  mixins: [selectParticipationMixin],
  data() {
    return {
      popup: false,
    };
  },
};
</script>