<template>
  <dialog
    ref="dialog"
    closedby="any"
  >
    <form method="dialog" class="wrapper">
      <header class="flex-row">
        Wirklich löschen?
        <PpButton class="round text">
          <Icon name="uil:times" mode="svg" />
        </PpButton>
      </header>
      <main>
        <div class="flex-col">
          <p>Bist du dir sicher, dass du diesen Eintrag löschen möchtest?</p>
        </div>
      </main>
      <footer class="flex-row">
        <PpButton class="text">
          <span>Abbrechen</span>
        </PpButton>
        <PpButton class="danger raised" @click="$emit('delete')">
          <span>Löschen</span>
        </PpButton>
      </footer>
    </form>
  </dialog>
</template>

<script setup lang="ts">
type Props = {
  currentCardIndex : number
}

defineProps<Props>()
defineEmits(['delete'])


</script>