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

  <div class="demo-row">
    <button class="btn btn-sm btn-primary" type="button" onclick="openDemoDrawer('right')">
      Open drawer
    </button>
    <button class="btn btn-sm btn-secondary" type="button" onclick="openDemoDrawer('left')">
      Open left drawer
    </button>
  </div>

  <script>
    function openDemoDrawer(position) {
      const drawer = VMKUIKit.Drawer.create("demo-drawer-" + position, {
        title: position === "left" ? "Left drawer" : "Drawer title",
        position: position,
        bodyHtml: "<p>" + (position === "left" ? "This drawer slides in from the left." : "Drawer content goes here. Press Escape or click the backdrop to close.") + "</p>",
        footer: ""
      });
      drawer.show();
    }
  </script>

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

    createApp({
      components: { GnDrawer, GnButton },
      data() {
        return {
          openRight: false,
          openLeft: false
        };
      },
      template: `
        <div class="demo-row">
          <gn-button variant="primary" size="sm" @click="openRight = true">Open Vue drawer</gn-button>
          <gn-button variant="secondary" size="sm" @click="openLeft = true">Open Vue left drawer</gn-button>

          <gn-drawer v-model:open="openRight" title="Vue drawer">
            <p>Right-side drawer rendered through the Vue adapter.</p>
          </gn-drawer>

          <gn-drawer v-model:open="openLeft" title="Vue left drawer" position="left">
            <p>Left-side drawer rendered through the Vue adapter.</p>
          </gn-drawer>
        </div>
      `
    }).mount("#vue-drawers-app");
  </script>
</section>