<section class="demo-section" aria-labelledby="lists-heading">
  <h2 id="lists-heading">Lists</h2>

  <h3>Default list</h3>
  <ul class="list">
    <li class="list-item is-active">
      <span class="list-item-icon"><i class="ph ph-house"></i></span>
      Dashboard
      <span class="list-item-meta">24</span>
    </li>
    <li class="list-item">
      <span class="list-item-icon"><i class="ph ph-user"></i></span>
      Profile
    </li>
    <li class="list-item is-disabled">
      <span class="list-item-icon"><i class="ph ph-gear"></i></span>
      Settings
    </li>
  </ul>

  <h3>Compact divided list</h3>
  <ul class="list list-compact list-divided">
    <li class="list-item">Inbox</li>
    <li class="list-item">Sent</li>
    <li class="list-item">Drafts</li>
  </ul>

  <h3>Vue action list</h3>
  <div id="vue-action-list-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnActionList, GnSwitch } from "/vue/index.js";

    createApp({
      components: { GnActionList, GnSwitch },
      data() {
        return {
          items: [
            { title: "Comments", subtitle: "Receive notifications when someone replies." },
            { title: "Mentions", subtitle: "Get alerted when you are mentioned." },
            { title: "Digest", subtitle: "Weekly summary of activity.", muted: true }
          ]
        };
      },
      template: `
        <gn-action-list :items="items" style="max-width: 420px;">
          <template #controls="{ item }">
            <gn-switch :model-value="!item.muted" />
          </template>
        </gn-action-list>
      `
    }).mount("#vue-action-list-app");
  </script>
</section>