{% comment %}
Reusable timeline partial for any list of audit entries.

Each entry should be a dict with keys:
  - at (datetime)        — when
  - actor (str | User)   — who (rendered via {{ actor }} so a User object works)
  - verb (str)           — short label (e.g. "Amendment approved")
  - payload_summary (str)— one-line summary
  - detail_url (str)     — optional link to detail page
  - variant (str)        — optional "neutral" | "primary" | "amber" | "green" | "red"

Optional context:
  - empty_message (str)  — message shown when entries is empty.
{% endcomment %}
{% if entries %}
<ul class="audit-trail timeline">
  {% for entry in entries %}
    <li class="timeline-node">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div class="min-w-0">
          <p class="font-display text-base font-semibold text-ruforum-text">{{ entry.verb }}</p>
          <p class="mt-0.5 font-meta text-[10px] uppercase tracking-[0.14em] text-ruforum-text-muted">
            {{ entry.at|date:"d M Y H:i" }}{% if entry.actor %} · {{ entry.actor }}{% endif %}
          </p>
        </div>
        {% if entry.variant %}<span class="badge badge-{{ entry.variant }}">{{ entry.verb }}</span>{% endif %}
      </div>
      {% if entry.payload_summary %}
      <p class="mt-2 text-sm text-ruforum-text">{{ entry.payload_summary }}</p>
      {% endif %}
      {% if entry.detail_url %}
      <a href="{{ entry.detail_url }}" class="mt-2 inline-flex items-center gap-1.5 text-xs text-ruforum-primary hover:underline">
        Open detail
        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
      </a>
      {% endif %}
    </li>
  {% endfor %}
</ul>
{% else %}
<div class="empty-panel">
  <p class="empty-panel__title">{{ empty_message|default:"No activity recorded yet." }}</p>
</div>
{% endif %}