<script setup lang="ts">
  import type {Ref} from "vue";

  const props = defineProps({
    title: {type: String, required: true},
    disable: {type: Boolean, required: true},
  });

  let dialog: Ref<boolean> = ref<boolean>(false);
  let loading: Ref<boolean> = ref<boolean>(false);

</script>

<template>
  <v-dialog
      v-model="dialog"
      :scrollable="true"
      width="800"
      max-height="750"
  >
    <template v-slot:activator="{ props }">
      <v-btn
          :flat="true"
          v-bind="props"
          :disabled="disable"
      >
        <v-icon>mdi-delete-empty</v-icon>
        <v-tooltip
            activator="parent"
            location="bottom"
        >
          Löschen
        </v-tooltip>
      </v-btn>
    </template>

    <v-card>
      <v-card-title>
        <v-icon size="small">
          mdi-delete-empty
        </v-icon>

        {{ title }}

        <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
      </v-card-title>

      <v-divider/>

      <v-card-text>
        Sind Sie sich sicher das Sie die Aktion ausführen möchten?
      </v-card-text>

      <v-divider/>

      <v-card-actions>
        <v-btn
            variant="text"
            :disabled="loading"
            @click="dialog = false"
        >
          Abbrechen
        </v-btn>

        <v-btn
            variant="text"
            @click="$emit('delete')"
        >
          Löschen
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

</template>

<style scoped>

</style>