<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>

  <h3>Definition list</h3>
  <dl class="list list-definition" style="max-width: 520px;">
    <div class="list-row">
      <dt class="list-term">Item</dt>
      <dd class="list-desc">Basic interface entity.</dd>
    </div>
    <div class="list-row">
      <dt class="list-term">Group</dt>
      <dd class="list-desc">Logical grouping of elements.</dd>
    </div>
    <div class="list-row">
      <dt class="list-term">Flow</dt>
      <dd class="list-desc">Set of actions performed sequentially.</dd>
    </div>
  </dl>

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

    createApp({
      components: { GnDefinitionList },
      data() {
        return {
          items: [
            { key: "status", term: "Status", description: "Operational" },
            { key: "region", term: "Region", description: "eu-west-1" },
            { key: "version", term: "Version", description: "v2.14.0" }
          ]
        };
      },
      template: `<gn-definition-list :items="items" style="max-width: 520px;" />`
    }).mount("#vue-definition-list-app");
  </script>

  <h3>Navigation list</h3>
  <ul class="list list-nav" style="max-width: 280px;">
    <li class="list-item list-item-active">
      <button class="list-action" type="button">
        <span class="list-label"><i class="ph ph-house"></i> Dashboard</span>
      </button>
    </li>
    <li class="list-item">
      <button class="list-action" type="button">
        <span class="list-label"><i class="ph ph-user"></i> Profile</span>
        <span class="list-meta">3</span>
      </button>
    </li>
    <li class="list-item">
      <button class="list-action" type="button">
        <span class="list-label"><i class="ph ph-gear"></i> Settings</span>
      </button>
    </li>
    <li class="list-item list-item-disabled">
      <button class="list-action" type="button" disabled>
        <span class="list-label">Advanced</span>
      </button>
    </li>
  </ul>

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

    createApp({
      components: { GnNavList },
      data() {
        return {
          items: [
            { label: "Dashboard", icon: "ph-house", active: true },
            { label: "Profile", icon: "ph-user", meta: "3" },
            { label: "Settings", icon: "ph-gear" },
            { label: "Advanced", icon: "ph-lock-key", disabled: true }
          ]
        };
      },
      template: `<gn-nav-list :items="items" style="max-width: 280px;" />`
    }).mount("#vue-nav-list-app");
  </script>
</section>