<section class="demo-section" aria-labelledby="avatar-heading">
  <h2 id="avatar-heading">Avatar</h2>

  <h3>Sizes</h3>
  <div class="cluster">
    <span class="avatar avatar-xs">AB</span>
    <span class="avatar avatar-sm">AB</span>
    <span class="avatar avatar-md">AB</span>
    <span class="avatar avatar-lg">AB</span>
    <span class="avatar avatar-xl">AB</span>
  </div>

  <h3>Initials</h3>
  <div class="cluster">
    <span class="avatar avatar-md avatar-primary">JD</span>
    <span class="avatar avatar-md avatar-secondary">MK</span>
    <span class="avatar avatar-md avatar-accent">VL</span>
  </div>

  <h3>Image</h3>
  <div class="cluster">
    <img class="avatar avatar-md" src="/assets/avatar-placeholder.jpg" alt="User avatar">
  </div>

  <h3>Icon avatar</h3>
  <div class="cluster">
    <span class="avatar avatar-md avatar-icon"><i class="ph ph-user"></i></span>
  </div>

  <h3>Status dot</h3>
  <div class="cluster">
    <span class="avatar avatar-md avatar-primary">JD<span class="avatar-status is-online"></span></span>
    <span class="avatar avatar-md avatar-secondary">MK<span class="avatar-status is-away"></span></span>
    <span class="avatar avatar-md avatar-accent">VL<span class="avatar-status is-offline"></span></span>
    <span class="avatar avatar-md avatar-danger">AW<span class="avatar-status is-busy"></span></span>
  </div>

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

    createApp({
      components: { GnAvatar },
      template: `
        <div class="demo-row">
          <gn-avatar initials="JD" size="md" variant="mint" status="online"></gn-avatar>
          <gn-avatar icon="ph-user" size="md" variant="neutral"></gn-avatar>
          <gn-avatar src="/assets/avatar-placeholder.jpg" alt="User" size="md"></gn-avatar>
        </div>
      `
    }).mount("#vue-avatar-app");
  </script>

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

    createApp({
      components: { GnAvatarStack },
      template: `
        <gn-avatar-stack
          :items="[
            { initials: 'JD', variant: 'mint' },
            { initials: 'MK', variant: 'yellow' },
            { initials: 'VL', variant: 'lavender' }
          ]"
          count="5"
        ></gn-avatar-stack>
      `
    }).mount("#vue-avatar-stack-app");
  </script>
</section>