<section class="demo-section" aria-labelledby="chips-heading">
  <h2 id="chips-heading">Chips</h2>

  <h3>Default chips</h3>
  <div class="cluster">
    <span class="chip">Label<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
    <span class="chip chip-primary">Primary<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
    <span class="chip chip-secondary">Secondary<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
    <span class="chip chip-accent">Accent<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
  </div>

  <h3>Selectable chips</h3>
  <div class="cluster">
    <button class="chip" type="button">Option A</button>
    <button class="chip chip-active" type="button">Option B</button>
    <button class="chip" type="button">Option C</button>
  </div>

  <h3>Small chips</h3>
  <div class="cluster">
    <span class="chip chip-sm">Small<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
    <span class="chip chip-sm chip-secondary">Tiny<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
  </div>

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

    createApp({
      components: { GnChip },
      setup() {
        const chips = ref([
          { label: "Tag", variant: "default" },
          { label: "Primary", variant: "primary" },
          { label: "Removable", variant: "secondary", removable: true }
        ]);
        const remove = index => chips.value.splice(index, 1);
        return { chips, remove };
      },
      template: `
        <div class="cluster">
          <gn-chip v-for="(chip, index) in chips" :key="chip.label"
            :variant="chip.variant" :removable="chip.removable" @remove="remove(index)"
          >{{ chip.label }}</gn-chip>
        </div>
      `
    }).mount("#vue-chips-app");
  </script>

  <h3>Vue chip group</h3>
  <div id="vue-chip-group-app" class="vue-mount"></div>
  <script type="module">
    import { createApp, ref } from "vue";
    import { GnChip, GnChipGroup } from "/vue/index.js";

    createApp({
      components: { GnChip, GnChipGroup },
      setup() {
        const chips = ref([
          { label: "Design", variant: "default" },
          { label: "Frontend", variant: "primary" },
          { label: "Backend", variant: "secondary", removable: true },
          { label: "QA", variant: "accent", removable: true }
        ]);
        const remove = index => chips.value.splice(index, 1);
        return { chips, remove };
      },
      template: `
        <gn-chip-group>
          <gn-chip v-for="(chip, index) in chips" :key="chip.label"
            :variant="chip.variant" :removable="chip.removable" @remove="remove(index)"
          >{{ chip.label }}</gn-chip>
        </gn-chip-group>
      `
    }).mount("#vue-chip-group-app");
  </script>
</section>