{% extends "dashboard/base_dash.html" %}
{% load dashboard_extras static %}
{% block title %}Notifications — GiniFollow{% endblock %}
{% block dashboard_inner %}
<div class="px-3 px-lg-4 py-4">
    <p class="dash-help mb-4">
        <strong>Notifications :</strong> forfait, messages, nouveaux contenus blog et ressources, rappels de rendez-vous et alertes liées à votre activité.
        Le bouton <em>Ouvrir</em> affiche le détail ici, sans quitter la page. La notification est marquée comme lue dès l’ouverture.
    </p>
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <h2 class="h5 fw-bold mb-0">Centre de notifications</h2>
        {% if notifications_list %}
        <form method="post" class="m-0">
            {% csrf_token %}
            <input type="hidden" name="notification_id" value="all">
            <button type="submit" class="btn btn-sm btn-outline-secondary">Tout marquer comme lu</button>
        </form>
        {% endif %}
    </div>
    <div class="gf-notif-list shadow-sm rounded-3 overflow-hidden" id="gfNotifList">
        {% for n in notifications_list %}
        <article class="gf-notif-item {% if not n.lu %}gf-notif-item--unread{% endif %}"
            data-notif-id="{{ n.pk }}"
            data-notif-type="{{ n.type }}">
            <div class="gf-notif-item__icon">
                <i class="bi {{ n.type|notification_icon }}"></i>
            </div>
            <div class="gf-notif-item__body flex-grow-1 min-w-0">
                <div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
                    <div class="min-w-0">
                        <div class="gf-notif-item__title fw-bold">{{ n.titre }}</div>
                        <p class="gf-notif-item__message mb-1">{{ n.message }}</p>
                        <div class="gf-notif-item__date small">{{ n.date|date:"d/m/Y H:i" }}</div>
                    </div>
                    {% if not n.lu %}
                    <span class="badge bg-primary gf-notif-badge">Nouveau</span>
                    {% endif %}
                </div>
                <div class="d-flex flex-wrap gap-2 mt-2 align-items-center">
                    <button type="button" class="btn btn-sm btn-outline-primary gf-notif-open-btn"
                        data-notif-id="{{ n.pk }}">Ouvrir</button>
                    {% if not n.lu %}
                    <form method="post" class="m-0">
                        {% csrf_token %}
                        <input type="hidden" name="notification_id" value="{{ n.pk }}">
                        <button type="submit" class="btn btn-sm btn-light border">Marquer lu</button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </article>
        {% empty %}
        <div class="gf-notif-item gf-notif-item--empty text-muted text-center py-5">Aucune notification.</div>
        {% endfor %}
    </div>
</div>
{% endblock %}