<script setup>
// The app's one confirmation prompt, mounted once in App.vue. It shows whatever
// askConfirm() was last asked (lib/confirm.js) and answers it.
import { t } from "../i18n";
import Modal from "./Modal.vue";
import { confirmPrompt, answerConfirm } from "../lib/confirm.js";
</script>

<template>
  <!-- Above every other modal: a question can be asked from inside one (removing
       a server is asked from the server dialog), and it has to sit on top of it. -->
  <Modal
    v-if="confirmPrompt.open"
    :title="confirmPrompt.title"
    :z-index="40"
    @close="answerConfirm(false)"
  >
    <p class="text-sm text-body">{{ confirmPrompt.message }}</p>
    <div class="mt-5 flex justify-end gap-2">
      <button type="button" class="dh-btn dh-btn-ghost" @click="answerConfirm(false)">
        {{ t("common.cancel") }}
      </button>
      <button type="button" class="dh-btn dh-btn-danger" @click="answerConfirm(true)">
        {{ confirmPrompt.confirmLabel || t("common.yes") }}
      </button>
    </div>
  </Modal>
</template>
