{# Timeline region — UX-035 adopter #7.
   Contract: ~/.claude/skills/ux-architect/components/timeline-region.md (UX-067)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-timeline-* classes
   (components/regions.css). Hover state on `is-clickable` modifier
   toggled by `{% if action_url %}`; attention accent still flows
   through the unchanged attention_classes macro. #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% from 'macros/region_wrapper.html' import region_card %}
{% from 'macros/attention_accent.html' import attention_classes %}
{% call region_card(title) %}
<div class="dz-timeline-region">
  {% if items %}
  <ul class="dz-timeline-list">
    {% for item in items %}
    {% set attn = item.get("_attention") if item.get is defined else none %}
    <li class="dz-timeline-item">
      {# Bullet marker on the border line #}
      <span class="dz-timeline-bullet-wrap">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
             class="dz-timeline-bullet {{ attention_classes(attn, 'bullet') }}"
             aria-hidden="true">
          <circle cx="10" cy="10" r="6"/>
        </svg>
      </span>

      <div class="dz-timeline-row">
        {# Date column #}
        <div class="dz-timeline-date">
          {% 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 via .is-clickable. #}
        <div class="dz-timeline-content{% 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 attn %}title="{{ attn.message }}"{% endif %}>
          {% set _primary = item[display_key] %}
          <p class="dz-timeline-title">{% if _primary is none %}{{ item.get("name", (entity_name|default("Event"))) }}{% else %}{{ _primary }}{% endif %}</p>
          {% for col in columns %}
          {% if col.key != display_key and col.type != "date" %}
          <p class="dz-timeline-field">
            <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="dz-timeline-overflow">Showing {{ items | length }} of {{ total }}</p>
  {% endif %}
  {% else %}
  <p class="dz-empty-dense" role="status">{{ empty_message | default("No events yet.") }}</p>
  {% endif %}
</div>
{% endcall %}