<template>
  <!-- eslint-disable vue/no-v-html -->
  <Dialog :open="true" class="relative z-50" @close="close">
    <div class="fixed inset-0 bg-black/30" aria-hidden="true"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
      <DialogPanel class="w-full max-w-2xl bg-white pt-8">
        <div class="px-8 pb-4">
          <DialogTitle class="relative mb-8 flex flex-row">{{ title }}</DialogTitle>
          <p v-html="content" />
        </div>
        <div class="flex flex-row-reverse gap-x-4 border-t border-t-gray-500 p-4">
          <button class="btn-primary" @click="confirm">Löschen</button>
          <button class="btn-secondary" @click="close">Abbrechen</button>
        </div>
      </DialogPanel>
    </div>
  </Dialog>
</template>

<script lang="ts" setup>
import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";

defineProps<{
  isOpen: boolean;
  title: string;
  content: string;
}>();

const emit = defineEmits(["confirm", "close"]);
const close = () => {
  emit("close");
};
const confirm = () => {
  emit("confirm");
};
</script>
