{% extends 'base.html' %}
{% block title %}Notifications{% endblock %}

{% block content %}
<div class="page-container">

    <div class="page-header mb-3">
        <h4><i class="bi bi-bell"></i> Notifications</h4>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">

            {% for n in notifications %}
            <div class="border-bottom py-3 {% if not n.is_read %}bg-light{% endif %}">

                <div class="d-flex justify-content-between">
                    <strong>{{ n.title }}</strong>
                    <small>{{ n.created_at|date:"M d, Y H:i" }}</small>
                </div>

                <p class="mb-2">{{ n.message }}</p>

                {% if not n.is_read %}
                <a href="{% url 'notif_read' n.id %}" class="btn btn-sm btn-outline-primary">
                    Mark as Read
                </a>
                {% endif %}

            </div>
            {% empty %}
            <p class="text-muted">No notifications</p>
            {% endfor %}

        </div>
    </div>

</div>
{% endblock %}