{# Timeline for audit/version entries. Usage: {% include "_timeline.html" with entries=entries %} #}
{% load scoped_tags %}
<div class="flow-root">
  <ul class="-mb-8">
    {% for entry in entries %}
    <li>
      <div class="relative pb-8">
        {% if not forloop.last %}
        <span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-slate-200" aria-hidden="true"></span>
        {% endif %}
        <div class="relative flex items-start space-x-3">
          <div class="relative">
            <span class="h-8 w-8 rounded-full bg-slate-100 flex items-center justify-center ring-4 ring-white text-xs font-medium text-slate-600">
              {{ entry.action|action_icon }}
            </span>
          </div>
          <div class="min-w-0 flex-1">
            <div class="text-sm text-slate-700">
              <span class="font-medium">{{ entry.action }}</span>
              on <span class="font-mono text-xs">{{ entry.target_type }}:{{ entry.target_id|truncate_id }}</span>
            </div>
            <div class="mt-0.5 text-xs text-slate-400">
              by {{ entry.actor_id|truncate_id }} &middot; {{ entry.timestamp|time_ago }}
            </div>
          </div>
        </div>
      </div>
    </li>
    {% endfor %}
  </ul>
</div>