<template>
  <mobile-fullscreen-dialog v-model="popup">
    <template #activator="activator">
      <!-- button +? -->
      <!-- -> popup = true -->
    </template>
    <template #title>
      <!-- Abwesenheit/Entschuldigung erfassen --> 
      <!-- Abwesenheit/Entschuldigung Zusammenfassung --> 
    </template>
    <template #content>
    <absence-form v-if="form" />
    <absence-summary v-else />
    </template>
    <template #actions>
      <!-- secondary -->
      <!-- TODO: Return to form on cancel? form=true -->
      <cancel-button
        @click="popup = false"
        disabled="loading"
      />
      <!-- primary -->
      <save-button
        v-if="form"
        i18n-key="actions.continue"
        @click="form = false"
        :loading="loading"
      />
      <save-button
        v-if="form"
        i18n-key="actions.confirm"
        @click="confirm"
        :loading="loading"
      />
    </template>
  </mobile-fullscreen-dialog>
</template>

<script>
import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
import AbsenceForm from "./AbsenceForm.vue";
import AbsenceSummary from "./AbsenceSummary.vue";
import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";

export default {
  name: "AbsenceDialog",
  components: {
    MobileFullscreenDialog,
    AbsenceForm,
    AbsenceSummary,
    CancelButton,
    SaveButton,
  },
  data() {
    return {
      popup: false,
      form: true,
      loading: false,
    };
  },
  methods: {
    confirm() {
      // TODO: Send mutation (shown in absence-summary)
      popup = false,
    },
  },
};
</script>