{{define "audit_nl"}}
<style>
.audit-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.audit-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.audit-row:last-child { border-bottom: none; }
.audit-row-left { display: flex; flex-direction: column; gap: 2px; }
.audit-actor { font-weight: 500; color: var(--text); }
.audit-action { font-size: 0.85rem; color: var(--text-muted); }
.audit-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.audit-details { font-size: 0.85rem; color: var(--text); }
.audit-date { font-size: 0.8rem; color: var(--text-muted); }
</style>

<div class="page-container">

  <div class="page-card">
    <div style="display: flex; justify-content: space-between; align-items: baseline;">
      <div>
        <h1>{{.T.audit_log}}</h1>
        <p class="intro">{{.T.audit_log_intro}} <strong>{{.TargetDossier.Name}}</strong></p>
      </div>
      <a href="/dossier/{{.TargetDossier.DossierID}}" class="btn btn-secondary btn-small">Terug</a>
    </div>
  </div>

  <div class="page-card">
    <h2>{{.T.audit_log}} <span style="font-weight: 400; font-size: 0.9rem; color: var(--text-muted);">{{len .AuditList}} vermeldingen</span></h2>
    <div class="audit-table">
      {{range .AuditList}}
      <div class="audit-row">
        <div class="audit-row-left">
          <span class="audit-actor">{{.ActorName}}</span>
          <span class="audit-action">{{.Action}}</span>
        </div>
        <div class="audit-row-right">
          <span class="audit-details">{{.Details}}</span>
          <span class="audit-date" data-ts="{{.CreatedAt.Unix}}"></span>
        </div>
      </div>
      {{else}}
      <div class="audit-row">
        <span style="color: var(--text-muted);">Nog geen activiteit geregistreerd</span>
      </div>
      {{end}}
    </div>
  </div>

  {{template "footer"}}
</div>

<script>
document.querySelectorAll('[data-ts]').forEach(el => {
  const ts = parseInt(el.dataset.ts, 10);
  if (ts > 0) {
    const d = new Date(ts * 1000);
    el.textContent = d.toLocaleString();
  }
});
</script>
{{end}}