{% extends "base.html" %}

{% block content %}
<h2>Mes notifications</h2>
<ul class="list-group">
    {% for notif in notifications %}
        <li class="list-group-item d-flex justify-content-between align-items-center {% if not notif.is_read %}bg-light{% endif %}">
            {{ notif.message }} <small>({{ notif.created_at|date:"d/m/Y H:i" }})</small>
            <div>
                {% if not notif.is_read %}
                    <a href="{% url 'notifications:mark_as_read' notif.id %}" class="btn btn-sm btn-success">Marquer comme lue</a>
                {% endif %}
                <a href="{% url 'notifications:delete' notif.id %}" class="btn btn-sm btn-danger">Supprimer</a>
            </div>
        </li>
    {% empty %}
        <li class="list-group-item">Aucune notification</li>
    {% endfor %}
</ul>
{% endblock %}