<h1>firebase-uploadfile Demo</h1>

  <div class="demo-section">
    <h2>Basic Upload</h2>
    <firebase-uploadfile
      id="basic"
      path="/demo/uploads"
      accept="image/*"
      max-size="5242880"
    ></firebase-uploadfile>
    <div class="output" id="basic-output">Select a file to upload...</div>
  </div>

  <div class="demo-section">
    <h2>Multiple Files with Auto Upload</h2>
    <firebase-uploadfile
      id="multi"
      path="/demo/uploads"
      accept="image/*,.pdf"
      multiple
      auto-upload
      show-progress
    ></firebase-uploadfile>
    <div class="output" id="multi-output">Select files to upload automatically...</div>
  </div>

  <div class="demo-section">
    <h2>Custom Styling</h2>
    <firebase-uploadfile
      id="custom"
      path="/demo/uploads"
      button-text="Choose Image"
      style="
        --firebase-uploadfile-border-color: #6366f1;
        --firebase-uploadfile-active-color: #4f46e5;
        --firebase-uploadfile-btn-bg: #6366f1;
        --firebase-uploadfile-progress-color: #6366f1;
      "
    ></firebase-uploadfile>
  </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 "https://esm.sh/@manufosela/firebase-uploadfile";

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

    basic.addEventListener('upload-progress', (e) => {
      basicOutput.textContent = `Uploading: ${e.detail.progress}%`;
    });

    basic.addEventListener('upload-complete', (e) => {
      basicOutput.innerHTML = `
        <strong>Upload Complete!</strong><br>
        URL: ${e.detail.downloadURL}<br>
        Path: ${e.detail.fullPath}
      `;
    });

    basic.addEventListener('upload-error', (e) => {
      basicOutput.textContent = `Error: ${e.detail.message}`;
    });

    // Multi upload events
    const multi = document.getElementById('multi');
    const multiOutput = document.getElementById('multi-output');

    multi.addEventListener('upload-complete', (e) => {
      multiOutput.innerHTML += `<div>Uploaded: ${e.detail.name}</div>`;
    });