<section class="demo-section" aria-labelledby="data-row-heading">
  <h2 id="data-row-heading">Data Row</h2>
  <p>Compact rows for lists and search results (Asset, Order, Audience, Campaign, Contact cards).</p>

  <div class="demo-row demo-row-vertical">
    <div class="data-row">
      <div class="data-row-media data-row-media--icon"><i class="ph ph-credit-card"></i></div>
      <div class="data-row-content">
        <div class="data-row-cell data-row-cell-main">
          <span class="data-row-value">Summer promo sale</span>
          <span class="data-row-meta">
            <i class="ph ph-envelope"></i>
            <span>Email</span>
            <span class="data-row-meta-separator"></span>
            <span>All subscribers</span>
          </span>
        </div>
      </div>
      <div class="data-row-metrics">
        <span class="data-row-metric"><i class="ph ph-star"></i> 19.1%</span>
        <span class="data-row-metric"><i class="ph ph-eye"></i> 1.2K</span>
      </div>
    </div>

    <div class="data-row">
      <div class="data-row-media"><img src="/assets/avatar-placeholder.jpg" alt=""></div>
      <div class="data-row-content">
        <div class="data-row-cell data-row-cell-main">
          <span class="data-row-value">Henry Stephen</span>
          <span class="data-row-meta">henry@gmail.com</span>
        </div>
      </div>
      <div class="data-row-metrics">
        <span class="data-row-metric data-row-metric--success">Active</span>
      </div>
    </div>
  </div>

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

    createApp({
      components: { GnDataRow },
      data() {
        return {
          selected: true,
          rows: [
            {
              icon: "ph-credit-card",
              columns: [{ value: "Summer promo sale", main: true }],
              meta: [
                { icon: "ph-envelope", value: "Email" },
                "All subscribers"
              ],
              metrics: [
                { icon: "ph-star", value: "19.1%" },
                { icon: "ph-eye", value: "1.2K" }
              ]
            },
            {
              image: "/assets/avatar-placeholder.jpg",
              columns: [{ value: "Henry Stephen", main: true }],
              meta: ["henry@gmail.com"],
              metrics: [{ value: "Active" }]
            }
          ]
        };
      },
      template: `
        <div class="demo-row demo-row-vertical">
          <gn-data-row
            v-for="(row, index) in rows"
            :key="index"
            v-bind="row"
            :selected="selected"
            @select="selected = $event"
          />
        </div>
      `
    }).mount("#vue-data-row-app");
  </script>
</section>