async function load(){
  let data;
  try {
    const r = await fetch('/api/streams', { cache: 'no-store' });
    if (!r.ok) throw new Error('api '+r.status);
    data = await r.json();
  } catch (e) {
    console.warn('streams api error:', e);
    // UI freundlich degradieren
    document.getElementById('list').innerHTML =
      '<div class="card"><div class="muted">Keine Daten (API-Fehler)</div></div>';
    return;
  }
  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);
document.getElementById('reload').addEventListener('click', load);
load();
setInterval(load, 3000);