{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Notifications{% endblock %}
{% block page_title %}Notifications{% endblock %}
{% block page_subtitle %}Principal-targeted messages from events and rules (Layer 15){% endblock %}
{% block layer_indicator %}L15 Notifications{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <div class="flex items-center gap-3">
    <span class="text-sm text-slate-500">{{ notifications|length }} notification{{ notifications|length|pluralize }}</span>
    {% if unread_count %}
    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-brand-50 text-brand-700 ring-1 ring-brand-600/20">
      {{ unread_count }} unread
    </span>
    {% endif %}
  </div>
  {% if unread_count %}
  <form method="post">
    {% csrf_token %}
    <input type="hidden" name="action" value="mark_all_read">
    <button type="submit" class="px-4 py-2 bg-slate-100 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-200 transition-colors">
      Mark All Read
    </button>
  </form>
  {% endif %}
</div>

{% if notifications %}
<div class="space-y-3">
  {% for notif in notifications %}
  <div class="bg-white rounded-xl border shadow-sm p-5 {% if notif.status == 'unread' %}border-brand-200 bg-brand-50/30{% else %}border-slate-200{% endif %}">
    <div class="flex items-start justify-between">
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2 mb-1">
          {% if notif.status == "unread" %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-100 text-brand-700 ring-1 ring-brand-600/20">UNREAD</span>
          {% else %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-slate-50 text-slate-500 ring-1 ring-slate-400/20">READ</span>
          {% endif %}
          {% if notif.channel %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-600 ring-1 ring-blue-500/20">{{ notif.channel }}</span>
          {% endif %}
        </div>
        <h3 class="text-sm font-semibold text-slate-900 mt-2">{{ notif.title|default:"Notification" }}</h3>
        {% if notif.body %}
        <p class="text-sm text-slate-600 mt-1">{{ notif.body|truncatewords:30 }}</p>
        {% endif %}
        <p class="text-xs text-slate-400 mt-2">{{ notif.created_at|format_dt }}</p>
      </div>
      {% if notif.status == "unread" %}
      <form method="post" class="ml-4 flex-shrink-0">
        {% csrf_token %}
        <input type="hidden" name="action" value="mark_read">
        <input type="hidden" name="notification_id" value="{{ notif.id }}">
        <button type="submit" class="px-3 py-1.5 bg-brand-600 text-white text-xs font-medium rounded-lg hover:bg-brand-700 transition-colors">
          Mark Read
        </button>
      </form>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
{% include "components/_empty_state.html" with title="No notifications" message="You don't have any notifications yet. They'll appear here when events trigger notification rules." %}
{% endif %}
{% endblock %}