{% extends 'base.html' %}
{% block content %}
    <div class="content">
        <h2 class="mb-5">{{ _("Notifications") }}</h2>
        <div class="d-flex justify-content-end mb-3">
            <a href="{% url 'mark_all_notifications_as_read' %}" class="btn btn-phoenix-primary"><i class="far fa-envelope fs-8 me-2"></i>{{ _("Mark all as read") }}</a>
        </div>
        {% if notifications %}
            <div class="mx-n4 mx-lg-n6 mb-5 border-bottom">
                {% for notification in notifications %}
                    <div class="d-flex align-items-center justify-content-between py-3 px-lg-6 px-4 notification-card border-top">
                        <div class="d-flex">
                            <div class="me-3 flex-1 mt-2">
                                <h4 class="fs-9 text-body-emphasis">{{ _("System") }}:</h4>
                                {% if notification.is_read %}
                                    <p class="fs-9 text-body-highlight">
                                        <span class="far fa-envelope text-success-dark fs-8 me-1"></span><span class="me-1">{{ notification.message|safe }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created|timesince }}</span>
                                    </p>
                                {% else %}
                                    <p class="fs-9 text-body-highlight">
                                        <span class="far fa-envelope-open text-danger-dark fs-8 me-1"></span><span>{{ notification.message|safe }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created|timesince }}</span>
                                    </p>
                                {% endif %}
                                <p class="text-body-secondary fs-9 mb-0">
                                    <span class="me-1 far fa-clock"></span>{{ notification.created }}
                                </p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="pagination">
            <span class="step-links">
                {% if notifications.has_previous %}
                    <a href="?page=1">&laquo; first</a>
                    <a href="?page={{ notifications.previous_page_number }}">previous</a>
                {% endif %}
                <span class="current">Page {{ notifications.number }} of {{ notifications.paginator.num_pages }}.</span>
                {% if notifications.has_next %}
                    <a href="?page={{ notifications.next_page_number }}">next</a>
                    <a href="?page={{ notifications.paginator.num_pages }}">last &raquo;</a>
                {% endif %}
            </span>
        </div>
    {% else %}
        <p>No notifications found.</p>
    {% endif %}
{% endblock %}