<section class="demo-section" aria-labelledby="profile-item-heading">
  <h2 id="profile-item-heading">Profile Item</h2>
  <p>Rounded action rows from the <em>Profile</em> Figma frame.</p>

  <div class="demo-row demo-row-vertical">
    <button class="profile-item" type="button">
      <span class="profile-item__main">
        <span class="profile-item__icon"><i class="ph ph-user"></i></span>
        <span class="profile-item__content">
          <span class="profile-item__title">Title</span>
        </span>
      </span>
      <span class="profile-item__chevron"><i class="ph ph-chevron-right"></i></span>
    </button>

    <button class="profile-item is-active" type="button">
      <span class="profile-item__main">
        <span class="profile-item__icon"><i class="ph ph-user"></i></span>
        <span class="profile-item__content">
          <span class="profile-item__title">Title</span>
        </span>
      </span>
      <span class="profile-item__chevron"><i class="ph ph-chevron-right"></i></span>
    </button>

    <button class="profile-item is-danger" type="button">
      <span class="profile-item__main">
        <span class="profile-item__icon"><i class="ph ph-trash"></i></span>
        <span class="profile-item__content">
          <span class="profile-item__title">Title</span>
        </span>
      </span>
      <span class="profile-item__chevron"><i class="ph ph-chevron-right"></i></span>
    </button>
  </div>

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

    createApp({
      components: { GnProfileItem },
      data() {
        return {
          items: [
            { title: "Account settings", icon: "ph-user" },
            { title: "Delete account", icon: "ph-trash", danger: true }
          ]
        };
      },
      template: `
        <div class="demo-row demo-row-vertical">
          <gn-profile-item
            v-for="item in items"
            :key="item.title"
            v-bind="item"
            @click="console.log(item.title)"
          />
        </div>
      `
    }).mount("#vue-profile-item-app");
  </script>
</section>