<h1>firebase-autolist Demo</h1>

  <div class="demo-section">
    <h2>Basic List</h2>
    <firebase-autolist
      id="basic"
      path="/demo/users"
      show-header
      show-refresh
      key-field="name"
    ></firebase-autolist>
    <div class="output" id="basic-output">Click an item to see details...</div>
  </div>

  <div class="demo-section">
    <h2>Grid Layout</h2>
    <firebase-autolist
      id="grid"
      path="/demo/products"
      layout="grid"
      limit-to="6"
      key-field="title"
      style="
        --firebase-autolist-item-bg: #f0f9ff;
        --firebase-autolist-item-hover-bg: #e0f2fe;
      "
    ></firebase-autolist>
  </div>

  <div class="demo-section">
    <h2>With Real-time Sync</h2>
    <firebase-autolist
      id="realtime"
      path="/demo/messages"
      auto-sync
      order-by="timestamp"
      order-direction="desc"
      limit-to="10"
      show-header
    ></firebase-autolist>
  </div>

:root {
  --bg: #0c0f14;
  --bg-elevated: #141923;
  --bg-panel: #171d28;
  --border: #262f3f;
  --text: #f4f6fb;
  --text-muted: #a7b0c2;
  --text-dim: #7d879b;
  --accent: #ff8a3d;
  --accent-strong: #ff6a00;
  --accent-soft: rgba(255, 138, 61, 0.16);
  --shadow: 0 20px 50px rgba(5, 8, 14, 0.45);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --max-width: 1160px;
}

h1 { color: var(--accent); }
    .demo-section {
      background: var(--bg-elevated);
      padding: 2rem;
      border-radius: 8px;
      margin-bottom: 2rem;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .demo-section h2 {
      margin-top: 0;
      color: #555;
    }
    .output {
      margin-top: 1rem;
      padding: 1rem;
      background: #f8f9fa;
      border-radius: 4px;
      font-family: monospace;
      font-size: 0.875rem;
    }

import { html } from 'lit';
    import "https://esm.sh/@manufosela/firebase-autolist";

    // Basic list
    const basic = document.getElementById('basic');
    const basicOutput = document.getElementById('basic-output');

    basic.addEventListener('item-click', (e) => {
      basicOutput.textContent = JSON.stringify(e.detail.item, null, 2);
    });

    basic.addEventListener('list-loaded', (e) => {
      console.log(`Loaded ${e.detail.count} items`);
    });

    // Grid with custom renderer
    const grid = document.getElementById('grid');
    grid.setItemRenderer((item) => html`
      <div style="text-align: center;">
        <strong>${item.title || item._key}</strong>
        ${item.price ? html`<p>$${item.price}</p>` : ''}
      </div>
    `);