{# Activity feed region — UX-035 adopter #10.
   v0.62 CSS refactor: inline Tailwind → semantic .dz-activity-* classes
   (components/regions.css). Bubble gets .is-clickable when wired to
   action_url so the hover state lives in CSS. #}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(title) %}
  {% if items %}
  <ul class="dz-activity-feed">
    {% for item in items %}
    <li class="dz-activity-row">
      <span class="dz-activity-dot">
        <svg fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <circle cx="10" cy="10" r="6"/>
        </svg>
      </span>
      <div class="dz-activity-row-inner">
        <div class="dz-activity-time">
          {{ item.created_at|timeago if item.created_at else '' }}
        </div>
        {# No full `border` here — the dashboard slot already owns card
           chrome (#852 follow-on). Border + rounded reads as a nested
           card per the card-safety invariants. Background tint alone
           is fine for visual grouping. #}
        <div class="dz-activity-bubble{% if action_url %} is-clickable{% endif %}"
             {% if action_url %}hx-get="{{ action_url | replace('{id}', item[action_id_field|default('id')]|resolve_fk_id) }}"
             hx-target="#dz-detail-drawer-content" hx-swap="innerHTML"{% endif %}>
          {% if item.actor or item.get('actor') %}
            <span class="dz-activity-actor">{{ item.actor or item.get('user', '') }}</span>
          {% endif %}
          {{ item.description or item.get('action', '') or item.get('title', '') }}
        </div>
      </div>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <div class="dz-activity-empty">{{ empty_message or "No activity yet" }}</div>
  {% endif %}
{% endcall %}