{% 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 "Activity Timeline" %}</h3>
    
    {% if timeline %}
    <div class="timeline">
        {% for update in timeline %}
        <div class="timeline-item {{ update.update_type }}">
            <div class="bg-slate-50 rounded-xl p-4">
                <div class="flex justify-between items-start mb-2">
                    <div class="flex items-center gap-2">
                        <span class="px-2 py-1 bg-navy text-white rounded-lg text-xs font-bold">
                            {{ update.get_update_type_display }}
                        </span>
                        {% if update.created_by %}
                        <span class="text-sm text-slate">{{ update.created_by.get_full_name }}</span>
                        {% endif %}
                    </div>
                    <small class="text-slate">{{ update.created_at|date:"M d, Y H:i" }}</small>
                </div>
                <p class="text-slate-700">{{ update.message }}</p>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <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>
    {% endif %}
</section>