{# Activity feed / timeline display for workspace regions #}
<div class="card bg-base-100 shadow-sm">
  <div class="card-body p-3">
    <h3 class="card-title text-sm">{{ title }}</h3>

    {% if items %}
    <ul class="timeline timeline-vertical timeline-compact">
      {% for item in items %}
      <li>
        {% if not loop.first %}<hr/>{% endif %}
        <div class="timeline-start text-xs text-base-content/50">
          {{ item.created_at|timeago if item.created_at else '' }}
        </div>
        <div class="timeline-middle">
          <svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="4"/>
          </svg>
        </div>
        <div class="timeline-end timeline-box text-sm py-1 px-2{% if action_url %} cursor-pointer hover:bg-base-200{% endif %}"
             {% if action_url %}hx-get="{{ action_url | replace('{id}', item[action_id_field|default('id')]|string) }}"
             hx-target="#dz-detail-drawer-content" hx-swap="innerHTML"{% endif %}>
          {% if item.actor or item.get('actor') %}
            <span class="font-medium">{{ item.actor or item.get('user', '') }}</span>
          {% endif %}
          {{ item.description or item.get('action', '') or item.get('title', '') }}
        </div>
        {% if not loop.last %}<hr/>{% endif %}
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <div class="text-center text-base-content/50 py-8 text-sm">
      {{ empty_message or "No activity yet" }}
    </div>
    {% endif %}
  </div>
</div>