{# Vertical timeline of workflow events on a record form. #}
{% if workflow_context and workflow_context.has_workflow %}
<div class="border-t border-default pt-3 mt-1">
    <p class="text-sm font-medium text-heading mb-3">Workflow history</p>
    {% if workflow_context.get('timeline') %}
    <ol class="relative border-s-2 border-default/80 ms-2.5 space-y-5 pb-1"
        aria-label="Workflow history">
        {% for ev in workflow_context.timeline %}
        <li class="ms-5 relative">
            <span class="absolute flex items-center justify-center w-3 h-3 rounded-full -start-[1.35rem] ring-2 ring-neutral-primary
                {% if ev.variant == 'success' %}bg-success
                {% elif ev.variant == 'danger' %}bg-fg-danger
                {% elif ev.variant == 'warning' %}bg-warning
                {% elif ev.variant == 'brand' %}bg-fg-brand
                {% else %}bg-neutral-tertiary{% endif %}"
                  aria-hidden="true"></span>
            <div class="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
                {% if ev.at_display %}
                <time class="text-2xs font-medium text-body-subtle shrink-0"
                      {% if ev.at %}datetime="{{ ev.at }}"{% endif %}>
                    {{ ev.at_display }}
                </time>
                {% endif %}
                {% if ev.pending %}
                <span class="text-2xs font-semibold uppercase tracking-wide text-warning-strong">Pending</span>
                {% endif %}
            </div>
            <p class="text-sm font-medium text-heading mt-0.5 leading-snug">{{ ev.title }}</p>
            {% if ev.author %}
            <p class="text-2xs text-body-subtle mt-0.5">{{ ev.author }}</p>
            {% endif %}
            {% if ev.body %}
            <p class="text-sm text-body mt-1 whitespace-pre-wrap">{{ ev.body }}</p>
            {% endif %}
        </li>
        {% endfor %}
    </ol>
    {% else %}
    <p class="text-sm text-body-subtle py-2">
        {% if workflow_context.started %}
        No workflow events logged yet.
        {% else %}
        History appears after the workflow starts on this record.
        {% endif %}
    </p>
    {% endif %}
</div>
{% endif %}