{% extends 'base.html' %}
{% load i18n %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="glass-card p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="mb-0">{% trans "Notifications" %}</h2>
                    <span class="badge bg-primary">{{ notifications.count }}</span>
                </div>
                
                {% if notifications %}
                    <div class="list-group list-group-flush">
                        {% for note in notifications %}
                            <div class="list-group-item bg-transparent border-0 mb-3 p-3 glass-card {% if not note.is_read %}border-start border-primary border-4{% endif %}">
                                <div class="d-flex justify-content-between">
                                    <p class="mb-1">{{ note.message }}</p>
                                    <small class="text-muted">{{ note.created_at|timesince }} {% trans "ago" %}</small>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-bell-slash fa-3x text-muted mb-3"></i>
                        <p>{% trans "No notifications yet." %}</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}