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

  <h3>Sizes</h3>
  <div class="demo-row">
    <div class="form-group">
      <label class="label">Large input
        <input class="input input-lg" placeholder="Placeholder text" />
      </label>
    </div>
    <div class="form-group">
      <label class="label">Medium input
        <input class="input" placeholder="Placeholder text" />
      </label>
    </div>
    <div class="form-group">
      <label class="label">Small input
        <input class="input input-sm" placeholder="Placeholder text" />
      </label>
    </div>
  </div>

  <h3>With icon</h3>
  <div class="demo-row">
    <div class="form-group">
      <label class="label">
        Search
        <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
        <input class="input input-icon-left" placeholder="Search..." />
      </label>
    </div>
  </div>

  <h3>States</h3>
  <div class="demo-row">
    <div class="form-group error">
      <label class="label">Error
        <input class="input" value="Invalid value" />
      </label>
      <p class="input-help is-error">This field has an error.</p>
    </div>
    <div class="form-group success">
      <label class="label">Success
        <input class="input" value="Valid value" />
      </label>
      <p class="input-help is-success">Looks good.</p>
    </div>
    <div class="form-group warning">
      <label class="label">Warning
        <input class="input" value="Maybe check this" />
      </label>
      <p class="input-help is-warning">Please review.</p>
    </div>
  </div>

  <h3>Disabled</h3>
  <div class="demo-row">
    <div class="form-group">
      <label class="label">Disabled
        <input class="input" value="Can’t edit" disabled />
      </label>
    </div>
  </div>

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

    createApp({
      components: { GnInput },
      data() {
        return {
          search: "",
          email: "hello@example.com",
          errorValue: "Invalid value"
        };
      },
      template: `
        <div class="demo-row" style="align-items: flex-end;">
          <gn-input v-model="search" label="Search" icon="essentials/zoom/search" placeholder="Search..." />
          <gn-input v-model="email" label="Email" type="email" />
          <gn-input v-model="errorValue" label="Error" state="error" help="This field has an error." />
        </div>
      `
    }).mount("#vue-inputs-app");
  </script>

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

    createApp({
      components: { GnSearchField },
      data() {
        return { query: "project" };
      },
      template: `
        <gn-search-field v-model="query" placeholder="Search..." style="max-width: 320px;" />
      `
    }).mount("#vue-search-field-app");
  </script>
</section>