{% extends "shared/frontend/base.html" %}
{% block title %}Systemlog · BMC Hub{% endblock %}
{% block content %}
<div class="container-fluid py-3">
 <div class="d-flex justify-content-between align-items-center mb-3"><div><h2 class="mb-1">Systemlog</h2><p class="text-muted mb-0">VoIP, e-mail og øvrige integrationshændelser</p></div><a href="/settings" class="btn btn-outline-secondary"><i class="bi bi-arrow-left"></i> Indstillinger</a></div>
 <div class="card p-3 mb-3"><div class="row g-2">
  <div class="col-md-2"><label class="form-label">Kilde</label><select id="eventSource" class="form-select"><option value="">Alle</option><option value="voip">VoIP</option><option value="email">E-mail</option><option value="system">System</option></select></div>
  <div class="col-md-2"><label class="form-label">Hændelse</label><select id="eventType" class="form-select"><option value="">Alle</option><option value="voip.established">VoIP etableret</option><option value="voip.terminated">VoIP hangup</option><option value="voip.orphan_hangup">Hangup uden start</option><option value="voip.stale_call">Mangler hangup</option><option value="email.received">E-mail modtaget</option><option value="email.sent">E-mail sendt</option><option value="email.send_failed">E-mail sendefejl</option></select></div>
  <div class="col-md-2"><label class="form-label">Status</label><select id="eventStatus" class="form-select"><option value="">Alle</option><option value="success">OK</option><option value="warning">Advarsel</option><option value="error">Fejl</option></select></div>
  <div class="col-md-2"><label class="form-label">Fra</label><input id="eventFrom" type="datetime-local" class="form-control"></div><div class="col-md-2"><label class="form-label">Til</label><input id="eventTo" type="datetime-local" class="form-control"></div>
  <div class="col-md-2"><label class="form-label">Søg</label><input id="eventQuery" class="form-control" placeholder="Nummer, call-id, emne…"></div>
 </div></div>
 <div class="card overflow-hidden"><div class="table-responsive"><table class="table table-hover mb-0"><thead><tr><th>Tid</th><th>Kilde</th><th>Hændelse</th><th>Status</th><th>Beskrivelse</th><th>Bruger</th><th>Korrelations-id</th></tr></thead><tbody id="eventRows"><tr><td colspan="7" class="text-center p-4">Henter log…</td></tr></tbody></table></div></div>
</div>
{% endblock %}
{% block extra_js %}<script>
const escapeEvent=v=>String(v??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
async function loadSystemEvents(){const p=new URLSearchParams();const values={source:eventSource.value,event_type:eventType.value,status:eventStatus.value,q:eventQuery.value};Object.entries(values).forEach(([k,v])=>v&&p.set(k,v));if(eventFrom.value)p.set('date_from',new Date(eventFrom.value).toISOString());if(eventTo.value)p.set('date_to',new Date(eventTo.value).toISOString());const r=await fetch('/api/v1/settings/system-events/list?'+p,{credentials:'include'}),b=await r.json();if(!r.ok)throw new Error(b.detail||'Kunne ikke hente log');eventRows.innerHTML=b.items.length?b.items.map(x=>`<tr><td class="text-nowrap">${new Date(x.occurred_at).toLocaleString('da-DK')}</td><td><span class="badge text-bg-secondary">${escapeEvent(x.source)}</span></td><td>${escapeEvent(x.event_type)}</td><td><span class="badge ${x.status==='error'?'text-bg-danger':x.status==='warning'?'text-bg-warning':'text-bg-success'}">${escapeEvent(x.status)}</span></td><td>${escapeEvent(x.summary)}</td><td>${escapeEvent(x.user_name||'–')}</td><td><code>${escapeEvent(x.correlation_id||'–')}</code></td></tr>`).join(''):'<tr><td colspan="7" class="text-center p-4 text-muted">Ingen hændelser matcher filtrene</td></tr>'}
let eventTimer;document.querySelectorAll('#eventSource,#eventType,#eventStatus,#eventFrom,#eventTo').forEach(x=>x.addEventListener('change',loadSystemEvents));eventQuery.addEventListener('input',()=>{clearTimeout(eventTimer);eventTimer=setTimeout(loadSystemEvents,300)});loadSystemEvents().catch(e=>eventRows.innerHTML=`<tr><td colspan="7" class="text-danger p-4">${escapeEvent(e.message)}</td></tr>`);
</script>{% endblock %}