<template>
  <dialog
    ref="dialog"
    closedby="none"
  >
    <form method="dialog" class="wrapper" ref="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'])

const dialog = useTemplateRef<HTMLDialogElement>('dialog')
const wrapper = useTemplateRef<HTMLElement>('wrapper')

onMounted(() => {
  onClickOutside(wrapper, () => dialog.value?.close())
})

</script>