<section class="demo-section">
  <h2>Modals</h2>

  <div class="demo-row">
    <button class="btn btn-sm btn-primary" type="button" onclick="openDemoModal()">
      Open modal
    </button>
  </div>

  <script>
    function openDemoModal() {
      const modal = VMKUIKit.Modals.create("demo-modal", {
        title: "Modal title",
        bodyHtml: "<p>Modal body content goes here. Press Escape or click the backdrop to close.</p>",
        actions: function (modal) {
          const cancel = VMKUIKit.Helper.template.createElement("button", { class: "btn btn-md btn-secondary", type: "button" }, "Cancel");
          cancel.addEventListener("click", function () { modal.close(); });
          const confirm = VMKUIKit.Helper.template.createElement("button", { class: "btn btn-md btn-primary", type: "button" }, "Confirm");
          confirm.addEventListener("click", function () { modal.close(); });
          return [cancel, confirm];
        }
      });
      modal.show();
    }
  </script>

  <h3>Vue modal</h3>
  <div id="vue-modals-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnModal, GnButton } from "/vue/index.js";

    createApp({
      components: { GnModal, GnButton },
      data() {
        return { open: false };
      },
      template: `
        <div class="demo-row">
          <gn-button variant="primary" size="sm" @click="open = true">Open Vue modal</gn-button>
          <gn-modal v-model:open="open" title="Vue modal">
            <p>This modal is rendered through the Vue adapter with focus trapping and backdrop click handling.</p>
            <template #actions="{ close }">
              <gn-button variant="secondary" size="md" @click="close">Cancel</gn-button>
              <gn-button variant="primary" size="md" @click="close">Confirm</gn-button>
            </template>
          </gn-modal>
        </div>
      `
    }).mount("#vue-modals-app");
  </script>
</section>