{% load i18n %}

<div class="bg-white rounded-lg shadow-md p-6">
    <h2 class="text-lg font-semibold text-gray-800 mb-4">{% translate "Recent Activity" %}</h2>
    {% if recent_activity %}
        <div class="space-y-4">
            {% for activity in recent_activity %}
                <div class="flex items-start space-x-3">
                    <div class="flex-shrink-0">
                        <i class="fas fa-circle-dot text-indigo-600"></i>
                    </div>
                    <div>
                        <p class="text-gray-700">{{ activity.action|default:"System activity" }}</p>
                        <p class="text-sm text-gray-500">{{ activity.timestamp|timesince }} ago</p>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="text-gray-500">{% translate "No recent activity" %}</p>
    {% endif %}
</div>