{% extends 'base.html' %}
{% block title %}Audit Dashboard - {{ APP_VERSION }}{% endblock %}
{% block content %}
<div class="container" style="max-width:1400px; margin:0 auto; padding:18px;">
  <h1>Audit Dashboard</h1>
  <p>Integritätsstatus der Audit-Chain und letzte Audit-Ereignisse (max. 200 Einträge).</p>

  <div style="display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 18px;">
    <a class="btn btn-primary" href="{{ url_for('admin_audit_export', format='md') }}">Audit Review exportieren (Markdown)</a>
    <a class="btn btn-outline-secondary" href="{{ url_for('admin_audit_export', format='json') }}">Audit Review exportieren (JSON)</a>
  </div>

  <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:16px 0 20px;">
    <div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff;">
      <div style="font-size:0.85rem; color:#64748b;">Chain Status</div>
      {% if verify_result.ok %}
      <div style="font-size:1.35rem; font-weight:700; color:#166534;">OK</div>
      {% else %}
      <div style="font-size:1.35rem; font-weight:700; color:#991b1b;">FEHLER</div>
      {% endif %}
    </div>
    <div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff;">
      <div style="font-size:0.85rem; color:#64748b;">Einträge</div>
      <div style="font-size:1.35rem; font-weight:700;">{{ verify_result.count }}</div>
    </div>
    <div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff;">
      <div style="font-size:0.85rem; color:#64748b;">Letzter Index</div>
      <div style="font-size:1.35rem; font-weight:700;">{{ verify_result.last_chain_index }}</div>
    </div>
    <div style="padding:14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff;">
      <div style="font-size:0.85rem; color:#64748b;">Mismatch Count</div>
      <div style="font-size:1.35rem; font-weight:700;">{{ verify_result.mismatches|length }}</div>
    </div>
  </div>

  {% if verify_result.mismatches %}
  <div style="margin-bottom:20px; border:1px solid #fecaca; background:#fff7f7; border-radius:10px; padding:12px;">
    <h3 style="margin-top:0; color:#991b1b;">Integritätsabweichungen</h3>
    <div style="max-height:280px; overflow:auto;">
      <table class="table" style="width:100%; border-collapse:collapse;">
        <thead>
          <tr>
            <th style="text-align:left; padding:8px; border-bottom:1px solid #ddd;">Index</th>
            <th style="text-align:left; padding:8px; border-bottom:1px solid #ddd;">Typ</th>
            <th style="text-align:left; padding:8px; border-bottom:1px solid #ddd;">Expected</th>
            <th style="text-align:left; padding:8px; border-bottom:1px solid #ddd;">Found</th>
          </tr>
        </thead>
        <tbody>
          {% for m in verify_result.mismatches %}
          <tr>
            <td style="padding:8px; border-bottom:1px solid #eee;">{{ m.chain_index }}</td>
            <td style="padding:8px; border-bottom:1px solid #eee;">{{ m.error }}</td>
            <td style="padding:8px; border-bottom:1px solid #eee; font-family:monospace;">{{ m.expected }}</td>
            <td style="padding:8px; border-bottom:1px solid #eee; font-family:monospace;">{{ m.found }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  <div style="border:1px solid #e2e8f0; border-radius:10px; background:#fff; padding:12px;">
    <h3 style="margin-top:0;">Letzte Audit-Ereignisse</h3>
    <div style="max-height:560px; overflow:auto;">
      <table class="table" style="width:100%; border-collapse:collapse;">
        <thead>
          <tr>
            <th style="text-align:left; padding:8px; border-bottom:1px solid #ddd;">Index</th>
            <th style="text-align:left; padding:8px; border-bottom:1px solid #ddd;">Zeit</th>
            <th style="text-align:left; padding:8px; border-bottom:1px solid #ddd;">Event</th>
            <th style="text-align:left; padding:8px; border-bottom:1px solid #ddd;">Actor</th>
            <th style="text-align:left; padding:8px; border-bottom:1px solid #ddd;">Hash</th>
            <th style="text-align:left; padding:8px; border-bottom:1px solid #ddd;">Payload</th>
          </tr>
        </thead>
        <tbody>
          {% for row in audit_rows %}
          <tr>
            <td style="padding:8px; border-bottom:1px solid #eee;">{{ row.chain_index }}</td>
            <td style="padding:8px; border-bottom:1px solid #eee;">{{ row.timestamp or row.created_at }}</td>
            <td style="padding:8px; border-bottom:1px solid #eee;">{{ row.event_type }}</td>
            <td style="padding:8px; border-bottom:1px solid #eee;">{{ row.actor }}</td>
            <td style="padding:8px; border-bottom:1px solid #eee; font-family:monospace; font-size:0.8rem;">{{ row.entry_hash }}</td>
            <td style="padding:8px; border-bottom:1px solid #eee;"><pre style="margin:0; white-space:pre-wrap; font-size:0.8rem;">{{ row.payload }}</pre></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}