base setup

at_django_boilerplate/notification/templates/notifications_list.html

@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="container py-4">
+  <!-- Header -->
+  <div class="d-flex justify-content-between align-items-center mb-4">
+    <h1 class="h4 d-flex align-items-center gap-2">
+      <i class="fas fa-bell text-warning me-2"></i> Notifications
+    </h1>
+    {% if notifications %}
+      <a href="{% url 'notification_mark_all_read' %}" class="btn btn-sm btn-primary">
+        Mark all as read
+      </a>
+    {% endif %}
+  </div>
+
+  <!-- Notifications List -->
+  <div class="list-group" style="max-height: 600px; overflow-y: auto;">
+    {% for n in notifications %}
+      <div class="list-group-item list-group-item-action d-flex justify-content-between align-items-start 
+                  {% if not n.is_read %}bg-warning bg-opacity-25{% endif %}">
+        
+        <!-- Icon + Content -->
+        <div class="d-flex align-items-start gap-3">
+          <div class="mt-1">
+            {% if not n.is_read %}
+              <i class="fas fa-circle text-warning small"></i>
+            {% else %}
+              <i class="fas fa-circle text-secondary small"></i>
+            {% endif %}
+          </div>
+          <div>
+            <p class="mb-1">{{ n.message }}</p>
+            <small class="text-muted">{{ n.created_at|date:"M d, Y H:i" }}</small>
+          </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="d-flex gap-2 ms-3">
+          {% if not n.is_read %}
+            <a href="{% url 'notification_mark_read' n.id %}" class="btn btn-sm btn-success d-flex align-items-center gap-1">
+              <i class="fas fa-check"></i> Mark
+            </a>
+          {% endif %}
+          <a href="{% url 'notification_delete' n.id %}" class="btn btn-sm btn-danger d-flex align-items-center gap-1">
+            <i class="fas fa-trash"></i> Delete
+          </a>
+        </div>
+      </div>
+    {% empty %}
+      <div class="text-center text-muted py-5">
+        <i class="fas fa-inbox fa-3x mb-3"></i>
+        <p class="mb-0">No notifications yet.</p>
+      </div>
+    {% endfor %}
+  </div>
+</div>
+{% endblock %}