{# Timeline region — UX-035 adopter #7. #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(title) %}
  {% if items %}
  <ul class="relative pl-4 border-l border-[hsl(var(--border))] space-y-3">
    {% for item in items %}
    {% set attn = item.get("_attention") if item.get is defined else none %}
    <li class="relative">
      {# Bullet marker on the border line #}
      <span class="absolute -left-[21px] top-1.5 flex h-3 w-3 items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3
          {% if attn and attn.level == 'critical' %}text-[hsl(var(--destructive))]
          {% elif attn and attn.level == 'warning' %}text-[hsl(var(--warning))]
          {% else %}text-[hsl(var(--primary))]{% endif %}"
          aria-hidden="true">
          <circle cx="10" cy="10" r="6"/>
        </svg>
      </span>

      <div class="flex gap-3">
        {# Date column #}
        <div class="text-[11px] text-[hsl(var(--muted-foreground))] min-w-[80px] pt-1">
          {% for col in columns %}
          {% if col.type == "date" %}
          {{ item[col.key] | timeago }}
          {% endif %}
          {% endfor %}
        </div>

        {# Content pad — plain padding only. No border, no bg. The
           enclosing dashboard slot owns all card chrome; adding an
           edge here reads as a card-in-card (issue #794 second
           follow-up). Hover state uses bg tint for affordance. #}
        <div class="flex-1 py-1 px-2 rounded-[4px]
          {% if action_url %}cursor-pointer hover:bg-[hsl(var(--muted)/0.4)] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]{% 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 attn %}title="{{ attn.message }}"{% endif %}>
          <p class="text-[13px] font-medium text-[hsl(var(--foreground))]">{{ item[display_key] | default(item.get("name", (entity_name|default("Event")))) }}</p>
          {% for col in columns %}
          {% if col.key != display_key and col.type != "date" %}
          <p class="text-[11px] text-[hsl(var(--muted-foreground))]">
            <span>{{ col.label }}:</span>
            {% if col.type == "badge" %}
              {{ render_status_badge(value=item[col.key], size='sm') }}
            {% elif col.type == "bool" %}
              {{ item[col.key] | bool_icon }}
            {% elif col.type == "currency" %}
              {{ item[col.key] | currency }}
            {% elif col.type == "ref" %}
              {% set ref = item[col.key] %}
              {% if ref is mapping %}{{ ref.get("name") or ref.get("title") or ref.get("label") or ref.get("email") or ref.get("id", "") }}{% elif ref %}{{ ref }}{% else %}-{% endif %}
            {% else %}
              {{ item[col.key] | default("") | truncate_text }}
            {% endif %}
          </p>
          {% endif %}
          {% endfor %}
        </div>
      </div>
    </li>
    {% endfor %}
  </ul>
  {% if total > items | length %}
  <p class="text-[11px] text-[hsl(var(--muted-foreground))] mt-2">Showing {{ items | length }} of {{ total }}</p>
  {% endif %}
  {% else %}
  <p class="dz-empty-dense text-[13px] text-[hsl(var(--muted-foreground))]" role="status">{{ empty_message | default("No events yet.") }}</p>
  {% endif %}
{% endcall %}