{% extends "base.html" %}

{% block title %}Notifications | Admin Portal{% endblock %}
{% block nav_notifications %}active{% endblock %}

{% block content %}
<style>
    /* Unread items get a soft highlight on the collapsed header */
    .notif-unread > .accordion-header .accordion-button.collapsed { background: #fff9e6; }
    #notifAccordion .accordion-button { font-weight: 500; }
</style>
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-bell me-2"></i>Notifications</h2>
        <p class="text-muted mb-0">Log of all notifications sent to students and staff — click a title to view the details.</p>
    </div>
    <a href="{% url 'portal:notification_compose' %}" class="btn btn-primary">
        <i class="fa-solid fa-paper-plane me-1"></i> Send Notification
    </a>
</div>

{% if notifications %}
<div class="accordion" id="notifAccordion">
    {% for notif in notifications %}
    <div class="accordion-item{% if not notif.is_read %} notif-unread{% endif %}">
        <h2 class="accordion-header" id="notifHead{{ notif.pk }}">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#notif{{ notif.pk }}" aria-expanded="false" aria-controls="notif{{ notif.pk }}">
                <span class="me-2 flex-shrink-0">
                    {% if notif.is_read %}
                    <i class="fa-regular fa-circle-check text-success" title="Read"></i>
                    {% else %}
                    <i class="fa-solid fa-circle text-warning" style="font-size:0.6rem;" title="Unread"></i>
                    {% endif %}
                </span>
                <span class="flex-grow-1 text-truncate">{{ notif.title }}</span>
                {% if not notif.is_read %}
                <span class="badge bg-warning text-dark ms-2 flex-shrink-0">Unread</span>
                {% endif %}
            </button>
        </h2>
        <div id="notif{{ notif.pk }}" class="accordion-collapse collapse"
             aria-labelledby="notifHead{{ notif.pk }}" data-bs-parent="#notifAccordion">
            <div class="accordion-body">
                <p class="mb-3" style="white-space:pre-wrap;">{{ notif.message }}</p>
                <div class="d-flex flex-wrap align-items-center gap-3 small text-muted border-top pt-3">
                    <span><i class="fa-regular fa-user me-1"></i>{{ notif.recipient.get_full_name }}</span>
                    <span><i class="fa-regular fa-envelope me-1"></i>{{ notif.recipient.email }}</span>
                    <span><i class="fa-regular fa-clock me-1"></i>{{ notif.created_at|date:"d M Y, H:i" }}</span>
                    <form method="post" action="{% url 'portal:notification_toggle_read' notif.pk %}" class="m-0 ms-auto">
                        {% csrf_token %}
                        <button type="submit"
                                class="btn btn-sm {% if notif.is_read %}btn-outline-warning{% else %}btn-outline-success{% endif %}">
                            <i class="fa-solid {% if notif.is_read %}fa-rotate-left{% else %}fa-check{% endif %} me-1"></i>
                            {% if notif.is_read %}Mark as Unread{% else %}Mark as Read{% endif %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% if is_paginated %}
<nav class="mt-4">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a></li>
        {% endif %}
        <li class="page-item disabled"><span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>
        {% if page_obj.has_next %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a></li>
        {% endif %}
    </ul>
</nav>
{% endif %}

{% else %}
<div class="portal-card">
    <div class="portal-card-body text-center py-5 text-muted">
        <i class="fa-solid fa-bell fa-2x mb-3 d-block"></i>
        <p class="mb-3">No notifications sent yet.</p>
        <a href="{% url 'portal:notification_compose' %}" class="btn btn-sm btn-primary">
            <i class="fa-solid fa-paper-plane me-1"></i> Send First Notification
        </a>
    </div>
</div>
{% endif %}
{% endblock %}