<section class="demo-section" aria-labelledby="dropdowns-heading">
  <h2 id="dropdowns-heading">Dropdowns</h2>

  <div class="dropdown">
    <button class="btn btn-sm btn-secondary" data-dropdown-trigger type="button">Open dropdown</button>
    <div class="dropdown-menu">
      <button class="dropdown-item" type="button">
        <span class="dropdown-item-icon"><i class="ph ph-pencil"></i></span>
        Edit
      </button>
      <button class="dropdown-item" type="button">
        <span class="dropdown-item-icon"><i class="ph ph-copy"></i></span>
        Duplicate
      </button>
      <div class="dropdown-divider"></div>
      <button class="dropdown-item is-disabled" type="button" disabled>
        <span class="dropdown-item-icon"><i class="ph ph-trash"></i></span>
        Delete
      </button>
    </div>
  </div>

  <h3>Vue dropdown</h3>
  <div id="vue-dropdowns-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnDropdown, GnDropdownItem } from "/vue/index.js";

    createApp({
      components: { GnDropdown, GnDropdownItem },
      data() {
        return { lastAction: "" };
      },
      template: `
        <div class="demo-row" style="min-height: 160px;">
          <gn-dropdown placement="left">
            <template #trigger>Vue dropdown</template>
            <gn-dropdown-item icon="ph-pencil" @click="lastAction = 'Edit'">Edit</gn-dropdown-item>
            <gn-dropdown-item icon="ph-copy" @click="lastAction = 'Duplicate'">Duplicate</gn-dropdown-item>
            <div class="dropdown-divider"></div>
            <gn-dropdown-item icon="ph-trash" disabled>Delete</gn-dropdown-item>
          </gn-dropdown>
          <span v-if="lastAction" class="text-sm">Last: {{ lastAction }}</span>
        </div>
      `
    }).mount("#vue-dropdowns-app");
  </script>
</section>