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

  <h3>Variants</h3>
  <div class="demo-row">
    <button class="btn btn-primary btn-md">Primary</button>
    <button class="btn btn-secondary btn-md">Secondary</button>
    <button class="btn btn-tertiary btn-md">Tertiary</button>
    <button class="btn btn-accent btn-md">Accent</button>
    <button class="btn btn-success btn-md">Success</button>
    <button class="btn btn-warning btn-md">Warning</button>
    <button class="btn btn-info btn-md">Info</button>
    <button class="btn btn-danger btn-md">Danger</button>
    <button class="btn btn-error btn-md">Error</button>
  </div>

  <h3>Sizes</h3>
  <div class="demo-row">
    <button class="btn btn-primary btn-lg">Large</button>
    <button class="btn btn-primary btn-md">Medium</button>
    <button class="btn btn-primary btn-sm">Small</button>
    <button class="btn btn-primary btn-xs">Xsmall</button>
    <button class="btn btn-primary btn-xxs">XXsmall</button>
  </div>

  <h3>With icon</h3>
  <div class="demo-row">
    <button class="btn btn-primary btn-md with-icon">
      <i class="ph ph-plus"></i>
      Add item
    </button>
    <button class="btn btn-secondary btn-md with-icon">
      <i class="ph ph-arrow-right"></i>
      Next
    </button>
    <button class="btn btn-tertiary btn-md with-icon">
      <i class="ph ph-plus"></i>
      New
    </button>
  </div>

  <h3>Icon only</h3>
  <div class="demo-row">
    <button class="btn btn-primary btn-md btn-icon-only" aria-label="Add">
      <i class="ph ph-plus"></i>
    </button>
    <button class="btn btn-secondary btn-md btn-icon-only" aria-label="Next">
      <i class="ph ph-arrow-right"></i>
    </button>
    <button class="btn btn-tertiary btn-md btn-icon-only" aria-label="Close">
      <i class="ph ph-x"></i>
    </button>
  </div>

  <h3>States</h3>
  <div class="demo-row">
    <button class="btn btn-primary btn-md">Default</button>
    <button class="btn btn-primary btn-md is-hover">Hover</button>
    <button class="btn btn-primary btn-md is-active">Active</button>
    <button class="btn btn-primary btn-md" disabled>Disabled</button>
  </div>
  <div class="demo-row">
    <button class="btn btn-secondary btn-md">Default</button>
    <button class="btn btn-secondary btn-md is-hover">Hover</button>
    <button class="btn btn-secondary btn-md is-active">Active</button>
    <button class="btn btn-secondary btn-md" disabled>Disabled</button>
  </div>
  <div class="demo-row">
    <button class="btn btn-tertiary btn-md">Default</button>
    <button class="btn btn-tertiary btn-md is-hover">Hover</button>
    <button class="btn btn-tertiary btn-md is-active">Active</button>
    <button class="btn btn-tertiary btn-md" disabled>Disabled</button>
  </div>
  <div class="demo-row">
    <button class="btn btn-primary btn-md is-loading">
      <i class="ph ph-spinner"></i>
      Loading
    </button>
    <button class="btn btn-secondary btn-md is-loading">
      <i class="ph ph-spinner"></i>
      Loading
    </button>
    <button class="btn btn-tertiary btn-md is-loading">
      <i class="ph ph-spinner"></i>
      Loading
    </button>
  </div>

  <h3>Destructive variants</h3>
  <div class="demo-row">
    <button class="btn btn-danger btn-md">Danger primary</button>
    <button class="btn btn-danger-secondary btn-md">Danger secondary</button>
    <button class="btn btn-danger-tertiary btn-md">Danger tertiary</button>
  </div>

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

    createApp({
      components: { GnButton },
      data() {
        return {
          variants: ["primary", "secondary", "accent", "success", "warning", "info", "danger"],
          sizes: ["lg", "md", "sm", "xs", "xxs"]
        };
      },
      template: `
        <div class="demo-row">
          <gn-button v-for="v in variants" :key="v" :variant="v" size="md">{{ v }}</gn-button>
        </div>
        <div class="demo-row">
          <gn-button v-for="s in sizes" :key="s" variant="primary" :size="s">{{ s }}</gn-button>
        </div>
        <div class="demo-row">
          <gn-button variant="primary" icon="ph-plus">With icon</gn-button>
          <gn-button variant="secondary" loading>Loading</gn-button>
          <gn-button variant="tertiary" disabled>Disabled</gn-button>
        </div>
      `
    }).mount("#vue-buttons-app");
  </script>
</section>