<section class="demo-section" aria-labelledby="tables-heading">
  <h2 id="tables-heading">Tables</h2>

  <div class="table-container">
    <table class="table table-sortable table-selectable">
      <thead>
        <tr>
          <th data-sortable>Name</th>
          <th data-sortable>Role</th>
          <th data-sortable>Status</th>
          <th data-sortable>Score</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alice</td>
          <td>Admin</td>
          <td><span class="badge badge-success">Active</span></td>
          <td>94</td>
        </tr>
        <tr>
          <td>Bob</td>
          <td>Editor</td>
          <td><span class="badge badge-warning">Pending</span></td>
          <td>72</td>
        </tr>
        <tr>
          <td>Carol</td>
          <td>Viewer</td>
          <td><span class="badge badge-secondary">Offline</span></td>
          <td>88</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h3>Compact striped table</h3>
  <div class="table-container">
    <table class="table table-compact table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>Item</th>
          <th>Qty</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>#101</td>
          <td>Widget</td>
          <td>12</td>
        </tr>
        <tr>
          <td>#102</td>
          <td>Gadget</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h3>Vue table</h3>
  <div id="vue-tables-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnTable, GnTableHeader, GnTableRow, GnBadge } from "/vue/index.js";

    createApp({
      components: { GnTable, GnTableHeader, GnTableRow, GnBadge },
      data() {
        return {
          rows: [
            { name: "Alice", role: "Admin", status: "success", label: "Active", score: 94 },
            { name: "Bob", role: "Editor", status: "warning", label: "Pending", score: 72 },
            { name: "Carol", role: "Viewer", status: "secondary", label: "Offline", score: 88 }
          ]
        };
      },
      template: `
        <gn-table sortable selectable style="max-width: 640px;">
          <thead>
            <tr>
              <gn-table-header sortable>Name</gn-table-header>
              <gn-table-header sortable>Role</gn-table-header>
              <gn-table-header sortable>Status</gn-table-header>
              <gn-table-header sortable>Score</gn-table-header>
            </tr>
          </thead>
          <tbody>
            <gn-table-row v-for="row in rows" :key="row.name">
              <td>{{ row.name }}</td>
              <td>{{ row.role }}</td>
              <td><gn-badge :variant="row.status">{{ row.label }}</gn-badge></td>
              <td>{{ row.score }}</td>
            </gn-table-row>
          </tbody>
        </gn-table>
      `
    }).mount("#vue-tables-app");
  </script>
</section>