{% 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 %}