<section class="demo-section">
  <h2>Choice controls</h2>

  <h3>Checkbox</h3>
  <div class="demo-row">
    <label class="checkbox">
      <input type="checkbox" checked />
      <span class="checkbox-control" aria-hidden="true"></span>
      <span class="checkbox-label">Checked</span>
    </label>
    <label class="checkbox">
      <input type="checkbox" />
      <span class="checkbox-control" aria-hidden="true"></span>
      <span class="checkbox-label">Unchecked</span>
    </label>
    <label class="checkbox">
      <input type="checkbox" checked disabled />
      <span class="checkbox-control" aria-hidden="true"></span>
      <span class="checkbox-label">Disabled checked</span>
    </label>
    <label class="checkbox">
      <input type="checkbox" disabled />
      <span class="checkbox-control" aria-hidden="true"></span>
      <span class="checkbox-label">Disabled</span>
    </label>
  </div>

  <h3>Radio</h3>
  <div class="demo-row">
    <div class="form-group radio-group">
      <label class="radio">
        <input type="radio" name="demo-radio" value="a" checked />
        <span class="radio-control" aria-hidden="true"></span>
        <span class="radio-label">Option A</span>
      </label>
      <label class="radio">
        <input type="radio" name="demo-radio" value="b" />
        <span class="radio-control" aria-hidden="true"></span>
        <span class="radio-label">Option B</span>
      </label>
      <label class="radio">
        <input type="radio" name="demo-radio" value="c" disabled />
        <span class="radio-control" aria-hidden="true"></span>
        <span class="radio-label">Option C disabled</span>
      </label>
    </div>
  </div>

  <h3>Switch</h3>
  <div class="demo-row">
    <label class="switch">
      <input type="checkbox" checked />
      <span class="switch-control" aria-hidden="true"></span>
      <span class="switch-label">Enabled</span>
    </label>
    <label class="switch">
      <input type="checkbox" />
      <span class="switch-control" aria-hidden="true"></span>
      <span class="switch-label">Disabled state</span>
    </label>
    <label class="switch">
      <input type="checkbox" checked disabled />
      <span class="switch-control" aria-hidden="true"></span>
      <span class="switch-label">Disabled on</span>
    </label>
  </div>

  <h3>Vue controls</h3>
  <div id="vue-choices-app" class="vue-mount"></div>
  <script type="module">
    import { createApp, ref } from "vue";
    import { GnCheckbox, GnRadio, GnSwitch } from "/vue/index.js";

    createApp({
      components: { GnCheckbox, GnRadio, GnSwitch },
      setup() {
        const checked = ref(true);
        const radio = ref("b");
        const toggled = ref(false);
        return { checked, radio, toggled };
      },
      template: `
        <div class="demo-row">
          <gn-checkbox v-model="checked">Vue checkbox</gn-checkbox>
          <gn-radio v-model="radio" value="b">Vue radio</gn-radio>
          <gn-switch v-model="toggled">Vue switch</gn-switch>
        </div>
      `
    }).mount("#vue-choices-app");
  </script>
</section>