<section class="demo-section">
  <h2>Select &amp; Textarea</h2>

  <h3>Select</h3>
  <div class="demo-row">
    <div class="form-group">
      <label class="label">Choose an option
        <div class="select-wrap">
          <select class="input select">
            <option>Option one</option>
            <option>Option two</option>
            <option>Option three</option>
          </select>
        </div>
      </label>
    </div>
    <div class="form-group is-success">
      <label class="label">Validated select
        <div class="select-wrap">
          <select class="input select">
            <option>Valid option</option>
            <option>Another option</option>
          </select>
        </div>
      </label>
      <p class="input-help is-success">Selection is valid.</p>
    </div>
  </div>

  <h3>Textarea</h3>
  <div class="demo-row">
    <div class="form-group">
      <label class="label">Message
        <textarea class="input" placeholder="Type your message..."></textarea>
      </label>
    </div>
  </div>

  <h3>Vue select & textarea</h3>
  <div id="vue-select-textarea-app" class="vue-mount"></div>
  <script type="module">
    import { createApp, ref } from "vue";
    import { GnSelect, GnTextarea } from "/vue/index.js";

    createApp({
      components: { GnSelect, GnTextarea },
      setup() {
        const selected = ref("");
        const message = ref("");
        const options = ref([
          { value: "", label: "Choose an option" },
          { value: "one", label: "Option one" },
          { value: "two", label: "Option two" }
        ]);
        return { selected, message, options };
      },
      template: `
        <div class="demo-row">
          <gn-select label="Vue select" v-model="selected" :options="options"></gn-select>
          <gn-textarea label="Vue textarea" v-model="message" placeholder="Type a message..." rows="3"></gn-textarea>
        </div>
      `
    }).mount("#vue-select-textarea-app");
  </script>
</section>