<template>
  <Teleport to="body">
    <Transition name="modal">
      <div v-if="visible" class="modal a-show" @click.self="onCancel">
        <div class="modal-backdrop" @click="onCancel" />
        <div class="modal-panel confirm-panel" role="dialog" aria-modal="true">
          <header class="modal-header">
            <h4 class="modal-title">Requires confirmation</h4>
            <button class="btn-icon modal-close" type="button" aria-label="Close" @click="onCancel">✕</button>
          </header>
          <div class="modal-body">
            <p>{{ message }}</p>
          </div>
          <footer class="modal-footer">
            <div class="actions">
              <button class="btn btn-primary" @click="onCancel">No</button>
              <button class="btn btn-warning" @click="onConfirm">Yes</button>
            </div>
          </footer>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { useConfirmState, _confirmResolve } from '@/composables/useConfirm.js'

const { visible, message } = useConfirmState()

function onConfirm() { _confirmResolve(true) }
function onCancel()  { _confirmResolve(false) }
</script>

<style scoped>
.confirm-panel {
  max-width: 420px;
  min-height: unset;
}
</style>