{% extends 'base.html' %}{% block eyebrow %}AUDIT & FORENSIK{% endblock %}{% block heading %}History{% endblock %}{% block content %}
<section class="kpi-grid">
  <article class="kpi"><span>SESSIONS</span><strong>{{ history.sessions|length }}</strong><small>letzte Datensätze</small></article>
  <article class="kpi"><span>BEKANNTE IPs</span><strong>{{ history.ips|length }}</strong><small>letzte Datensätze</small></article>
  <article class="kpi"><span>POLICY-EVENTS</span><strong>{{ history.events|length }}</strong><small>Block / Freigabe</small></article>
  <article class="kpi"><span>CONTROL-AKTIONEN</span><strong>{{ audit|length }}</strong><small>lokales Audit</small></article>
</section>
{% if history_error %}<div class="notice error"><strong>!</strong><p>{{ history_error }}</p></div>{% endif %}

<section class="history-toolbar panel">
  <div class="history-tabs" role="tablist">
    <button class="history-tab active" data-tab="control">Control</button>
    <button class="history-tab" data-tab="sessions">Sessions</button>
    <button class="history-tab" data-tab="ips">IP-History</button>
    <button class="history-tab" data-tab="policy">Policy</button>
  </div>
  <input id="history-search" type="search" placeholder="Benutzer, IP, Titel, Gerät, ASN …" autocomplete="off">
</section>

<section class="panel history-pane active" data-pane="control">
  <div class="panel-head"><div><p class="eyebrow">CENTER AUDIT</p><h2>Ausgeführte Änderungen</h2></div><small>{{ audit|length }} Einträge</small></div>
  <div class="table-wrap"><table><thead><tr><th>Zeit</th><th>Aktion</th><th>Details</th><th>Quelle</th><th>Ergebnis</th></tr></thead><tbody>
  {% for row in audit %}<tr class="filter-row"><td class="nowrap">{{ row.ts|dt }}</td><td><span class="event-kind">{{ row.action }}</span></td><td>{{ row.detail }}{% if row.error %}<small class="cell-sub danger-text">{{ row.error }}</small>{% endif %}</td><td class="mono">{{ row.remote_ip }}</td><td><span class="badge {{ 'active' if row.ok else 'danger' }}">{{ 'OK' if row.ok else 'FEHLER' }}</span></td></tr>{% else %}<tr><td colspan="5">Noch keine Control-Aktionen protokolliert.</td></tr>{% endfor %}
  </tbody></table></div>
</section>

<section id="sessions" class="panel history-pane" data-pane="sessions">
  <div class="panel-head"><div><p class="eyebrow">PLAYBACK</p><h2>Session-History</h2></div><small>{{ history.sessions|length }} Einträge</small></div>
  <div class="table-wrap"><table><thead><tr><th>Zuletzt</th><th>Benutzer</th><th>Titel</th><th>Gerät</th><th>Standort / ASN</th><th>IP</th><th>Traffic</th><th>Status</th></tr></thead><tbody>
  {% for row in history.sessions %}<tr class="filter-row"><td class="nowrap">{{ row.last_seen|dt }}</td><td><strong>{{ row.user_name }}</strong></td><td>{{ row.series or row.title }}{% if row.series %}<small class="cell-sub">{{ row.title }}</small>{% endif %}</td><td>{{ row.device }}<small class="cell-sub">{{ row.client }}</small></td><td>{{ [row.city,row.country]|select|join(', ') }}<small class="cell-sub">{{ row.asn }}</small></td><td class="mono break">{{ row.ip }}</td><td>{{ row.bytes|bytes }}</td><td><span class="badge {{ 'active' if row.active else '' }}">{{ 'AKTIV' if row.active else 'BEENDET' }}</span></td></tr>{% else %}<tr><td colspan="8">Keine Sessions vorhanden.</td></tr>{% endfor %}
  </tbody></table></div>
</section>

<section class="panel history-pane" data-pane="ips">
  <div class="panel-head"><div><p class="eyebrow">CLIENT FORENSIK</p><h2>IP-History</h2></div><small>{{ history.ips|length }} Einträge</small></div>
  <div class="table-wrap"><table><thead><tr><th>Zuletzt</th><th>Benutzer</th><th>IP</th><th>Gerät</th><th>Standort / ASN</th><th>Klasse</th><th>Sichtungen</th></tr></thead><tbody>
  {% for row in history.ips %}<tr class="filter-row"><td class="nowrap">{{ row.last_seen|dt }}<small class="cell-sub">zuerst {{ row.first_seen|dt }}</small></td><td><strong>{{ row.user_name }}</strong></td><td class="mono break">{{ row.ip }}</td><td>{{ row.device }}<small class="cell-sub">{{ row.client }}</small></td><td>{{ [row.city,row.country]|select|join(', ') }}<small class="cell-sub">{{ row.asn }}</small></td><td><span class="badge">{{ row.last_classification }}</span></td><td>{{ row.sightings }}<small class="cell-sub">{{ row.limited_sightings }} limitiert</small></td></tr>{% else %}<tr><td colspan="7">Keine IP-History vorhanden.</td></tr>{% endfor %}
  </tbody></table></div>
</section>

<section class="panel history-pane" data-pane="policy">
  <div class="panel-head"><div><p class="eyebrow">POLICY AUDIT</p><h2>Blocks & Ereignisse</h2></div><small>{{ history.blocks|length }} Blocks · {{ history.events|length }} Events</small></div>
  <div class="grid two history-split">
    <div class="table-wrap"><table><thead><tr><th>Zeit</th><th>Benutzer / IP</th><th>Grund</th><th>Status</th></tr></thead><tbody>
    {% for row in history.blocks %}<tr class="filter-row"><td class="nowrap">{{ row.blocked_at|dt }}</td><td><strong>{{ row.user_name or '—' }}</strong><small class="cell-sub mono">{{ row.ip }}</small></td><td>{{ row.reason }}</td><td><span class="badge {{ 'danger' if row.active else '' }}">{{ 'AKTIV' if row.active else 'ABGELAUFEN' }}</span></td></tr>{% else %}<tr><td colspan="4">Keine Blocks.</td></tr>{% endfor %}
    </tbody></table></div>
    <div class="event-list">{% for row in history.events %}<div class="event filter-row"><span class="event-kind">{{ row.kind }}</span><div><strong>{{ row.user_name or 'System' }}</strong><small>{{ row.ts|dt }} · {{ row.detail }}</small></div></div>{% else %}<p class="muted">Keine Policy-Ereignisse.</p>{% endfor %}</div>
  </div>
</section>
<script>
(()=>{const tabs=[...document.querySelectorAll('.history-tab')],panes=[...document.querySelectorAll('.history-pane')],search=document.querySelector('#history-search');function select(name){tabs.forEach(x=>x.classList.toggle('active',x.dataset.tab===name));panes.forEach(x=>x.classList.toggle('active',x.dataset.pane===name));location.hash=name==='control'?'':name}tabs.forEach(x=>x.addEventListener('click',()=>select(x.dataset.tab)));search.addEventListener('input',()=>{const q=search.value.toLocaleLowerCase('de');document.querySelectorAll('.filter-row').forEach(r=>r.hidden=q&&!r.textContent.toLocaleLowerCase('de').includes(q))});const initial=location.hash.slice(1);if(tabs.some(x=>x.dataset.tab===initial))select(initial)})();
</script>
{% endblock %}