<section class="demo-section">
  <h2>Confirm Dialog</h2>

  <div class="demo-row">
    <button class="btn btn-warning" type="button" onclick="VMKUIKit.confirmPopup('Are you sure you want to delete this item?', () => alert('Confirmed'), () => console.log('Canceled'))">
      Browser confirm popup
    </button>
  </div>

  <div id="vue-confirm-app" class="vue-mount"></div>
  <script type="module">
    import { createApp, ref } from "vue";
    import { GnButton, GnConfirmDialog } from "/vue/index.js";

    createApp({
      components: { GnButton, GnConfirmDialog },
      setup() {
        const open = ref(false);
        return { open };
      },
      template: document.getElementById("vue-confirm-template").innerHTML
    }).mount("#vue-confirm-app");
  </script>
  <!-- Inline fallback if ESM import fails in raw file preview -->
  <script type="text/template" id="vue-confirm-template">
    <gn-button variant="warning" @click="open = true">Vue confirm dialog</gn-button>
    <gn-confirm-dialog
      v-model:open="open"
      title="Requires confirmation"
      message="Are you sure you want to proceed?"
      confirm-text="YES"
      cancel-text="NO"
      confirm-variant="warning"
      @confirm="console.log('confirmed')"
      @cancel="console.log('canceled')"
    />
  </script>
</section>