{% load i18n %}
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
    <h3 class="text-xl font-bold text-navy mb-6">{% trans "Timeline" %}</h3>

    {% if not stage_timeline.stages %}
    <div class="text-center py-12">
        <i data-lucide="clock-history" class="w-16 h-16 mx-auto text-slate-300 mb-4"></i>
        <p class="text-slate">{% trans "No activity recorded yet" %}</p>
    </div>
    {% else %}
    <div class="relative">
        {% for stage in stage_timeline.stages %}
        <div class="relative pl-10 pb-6 {% if not forloop.last %}border-l-2 border-slate-200 ml-[5px]{% else %}ml-[5px]{% endif %}">
            <div class="absolute left-0 top-0 w-7 h-7 rounded-full {{ stage.color }} ring-4 ring-white -translate-x-[11px] flex items-center justify-center">
                <i data-lucide="{{ stage.icon }}" class="w-4 h-4 text-white"></i>
            </div>
            <div class="flex items-baseline justify-between gap-4">
                <div>
                    <p class="text-sm font-semibold text-navy">{{ stage.label }}</p>
                    <p class="text-xs text-slate">{{ stage.timestamp|date:"d M Y, h:i A" }}</p>
                    {% if stage.performed_by %}
                    <p class="text-[10px] text-slate-400 mt-0.5 flex items-center gap-1">
                        <i data-lucide="user" class="w-3 h-3"></i> {{ stage.performed_by }}
                    </p>
                    {% endif %}
                </div>
                {% if stage.duration_from_prev %}
                <span class="shrink-0 px-2 py-0.5 rounded-md text-[11px] font-bold bg-slate-100 text-slate-500">
                    {{ stage.duration_from_prev }}
                </span>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% if stage_timeline.total_time %}
    <div class="mt-2 pt-4 border-t-2 border-slate-200 flex items-center justify-between">
        <span class="text-sm font-bold text-navy">{% trans "Total Time" %}</span>
        <span class="px-3 py-1 rounded-lg text-sm font-bold bg-navy text-white">
            {{ stage_timeline.total_time }}
        </span>
    </div>
    {% endif %}
    {% endif %}
</section>
