{% load i18n %}
{% if stage_timeline %}
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
    <h3 class="font-bold text-navy mb-4 text-sm flex items-center gap-2">
        <i data-lucide="clock" class="w-4 h-4 text-blue"></i>
        {% trans "Status Timeline" %}
    </h3>
    <div class="space-y-0">
        {% for stage in stage_timeline %}
        <div class="relative pl-6 pb-4 {% if not forloop.last %}border-l-2 border-slate-200 ml-2{% endif %}">
            <div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full {{ stage.color }}"></div>
            <div class="text-xs text-slate-500 mb-0.5">{{ stage.timestamp|date:"M d, Y H:i" }}</div>
            <div class="text-sm font-medium text-navy">{{ stage.label }}</div>
            {% if stage.duration_from_prev %}
            <div class="text-xs text-slate-400 mt-0.5">
                <span class="px-1.5 py-0.5 rounded text-xs font-semibold bg-slate-100 text-slate-600">
                    +{{ stage.duration_from_prev }}
                </span>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}