{% extends 'base.html' %}

{% block content %}

<div class="content">
        <h2 class="mb-5">{{ _("Notifications") }}</h2>

{% 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 not 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 }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created_at|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 }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created_at|timesince }}</span></p>
                  {% endif %}
                <p class="text-body-secondary fs-9 mb-0"><span class="me-1 far fa-clock"></span>{{ notification.created_at }}</p>
              </div>
            </div>
            <div class="dropdown">
              <button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none notification-dropdown-toggle" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10 text-body"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="{% url 'mark_notification_as_read' notification.pk %}">{{ _("Mark as Read")}}</a></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 %}