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

  <div class="demo-row">
    <button class="btn 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-secondary", type: "button" }, "Cancel");
          cancel.addEventListener("click", function () { modal.close(); });
          const confirm = VMKUIKit.Helper.template.createElement("button", { class: "btn btn-primary", type: "button" }, "Confirm");
          confirm.addEventListener("click", function () { modal.close(); });
          return [cancel, confirm];
        }
      });
      modal.show();
    }
  </script>
</section>