async function load(){
  const r = await fetch('/api/streams');
  const data = await r.json();
  const q = (document.getElementById('filter').value||'').toLowerCase();
  const list = document.getElementById('list');
  list.innerHTML = '';
  data.items
    .filter(it => !q || it.name.toLowerCase().includes(q))
    .forEach(it => {
      const a = document.createElement('a');
      a.href = '/' + encodeURIComponent(it.name);
      a.className = 'card';
      a.innerHTML = `
        <div class="row space-between">
          <div>
            <div class="title-strong">${it.name}</div>
            <div class="muted">Zuschauer: ${it.viewers}</div>
          </div>
          <div class="pill ${it.live ? 'live':'off'}">${it.live ? 'LIVE' : 'Offline'}</div>
        </div>`;
      list.appendChild(a);
    });
}
document.getElementById('filter').addEventListener('input', load);
load(); setInterval(load, 3000);