<section class="demo-section">
  <h2>Advanced select</h2>

  <div class="demo-row">
    <input
      id="demo-advanced-select"
      type="text"
      placeholder="Choose a country"
      autocomplete="nope"
    >
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      if (window.VMKUIKit?.advancedSelect) {
        window.VMKUIKit.advancedSelect(
          document.getElementById("demo-advanced-select"),
          {
            ua: "Ukraine",
            pl: "Poland",
            de: "Germany",
            fr: "France",
            es: "Spain",
            it: "Italy",
            us: "United States",
            ca: "Canada"
          },
          "No countries found"
        );
      }
    });
  </script>

  <h3>Vue combobox</h3>
  <div id="vue-combobox-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnCombobox } from "/vue/index.js";

    createApp({
      components: { GnCombobox },
      data() {
        return {
          value: "",
          options: [
            { value: "ua", label: "Ukraine" },
            { value: "pl", label: "Poland" },
            { value: "de", label: "Germany" },
            { value: "fr", label: "France" },
            { value: "es", label: "Spain" }
          ]
        };
      },
      template: `
        <gn-combobox v-model="value" label="Country" :options="options" placeholder="Search country" style="max-width: 320px;" />
      `
    }).mount("#vue-combobox-app");
  </script>
</section>