{% load i18n %}

<div class="bg-white rounded-lg shadow-md p-6">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-gray-800">{% translate "Notifications" %}</h2>
        {% if notification_count > 0 %}
            <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">{{ notification_count }}</span>
        {% endif %}
    </div>
    {% if notifications %}
        <div class="space-y-3">
            {% for notification in notifications %}
                <div class="p-3 bg-gray-50 rounded-lg">
                    <p class="text-sm text-gray-700">{{ notification.message }}</p>
                    <p class="text-xs text-gray-500 mt-1">{{ notification.created_at|timesince }} ago</p>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="text-gray-500 text-sm">{% translate "No new notifications" %}</p>
    {% endif %}
</div>