{{define "audit"}}
<div class="sg-container">
  <div class="dossier-header" style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px;">
    <div>
      <h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 8px;">{{.T.audit_log}}</h1>
      <p style="font-size: 1.15rem; font-weight: 300; color: var(--text-muted);">{{.T.audit_log_intro}} <strong>{{.TargetDossier.Name}}</strong></p>
    </div>
    <a href="/dossier/{{.TargetDossier.DossierID}}" class="btn btn-secondary btn-small">← {{.T.back_to_dossier}}</a>
  </div>
  
  <div class="data-card">
    <div class="data-card-header">
      <div class="data-card-indicator privacy"></div>
      <div class="data-card-title">
        <span class="section-heading">{{.T.audit_log}}</span>
        <span class="data-card-summary">{{len .AuditList}} entries</span>
      </div>
    </div>
    
    <div class="data-table">
      {{range .AuditList}}
      <div class="data-row">
        <div class="data-row-main">
          <span class="data-label">{{.ActorName}}</span>
          <span class="data-meta">{{.Action}}</span>
        </div>
        <div class="data-values">
          <span class="data-value">{{.Details}}</span>
          <span class="data-date" data-ts="{{.CreatedAt.Unix}}"></span>
        </div>
      </div>
      {{else}}
      <div class="data-row">
        <span class="text-muted">No activity recorded yet</span>
      </div>
      {{end}}
    </div>
  </div>
</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}}