{% extends "layouts/dashboard.html" %}
{% load humanize %}
{% load notification_tags %}
{% block title %}Notifications — IILMP{% endblock %}
{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">Dashboard</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="text-ruforum-text">Notifications</span>
</nav>
{% endblock %}
{% block content %}

<header class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
  <div class="max-w-2xl">
    <p class="font-meta text-[11px] uppercase tracking-[0.16em] text-ruforum-text-muted">Activity stream</p>
    <h1 class="display-1 mt-1 !text-[2rem] !leading-[1.1] sm:!text-[2.5rem]">Notifications</h1>
    <p class="mt-3 text-sm leading-relaxed text-ruforum-text-muted">
      {% if page_obj.paginator.count %}
        {% if unread_count %}
          <span class="font-semibold text-ruforum-text">{{ unread_count }} unread</span>
          of {{ page_obj.paginator.count }} entr{{ page_obj.paginator.count|pluralize:"y,ies" }}{% with latest=page_obj.0.created_at %} · last update {{ latest|smart_time }}{% endwith %}.
        {% else %}
          {{ page_obj.paginator.count }} entr{{ page_obj.paginator.count|pluralize:"y,ies" }} · all caught up.
        {% endif %}
      {% else %}
        You have no notifications yet.
      {% endif %}
    </p>
  </div>
  {% if unread_count %}
  <form method="post" action="{% url 'core:notification_mark_all_read' %}" class="shrink-0">
    {% csrf_token %}
    <button type="submit" class="btn-secondary">
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      Mark all read
    </button>
  </form>
  {% endif %}
</header>

<div class="card overflow-hidden">
  {% if page_obj %}
  <div class="divide-y divide-ruforum-border">
    {% for notification in page_obj %}
      {% include "notifications/partials/notification_item.html" %}
    {% endfor %}
  </div>
  {% else %}
  <div class="px-6 py-2">
    <div class="empty-panel my-0 border-0 bg-transparent">
      <div class="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-ruforum-surface text-ruforum-text-muted">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/>
        </svg>
      </div>
      <p class="empty-panel__title">You're all caught up</p>
      <p class="empty-panel__lede">When something needs your attention — applications, awards, mentorships, programmes — it will appear here.</p>
    </div>
  </div>
  {% endif %}
</div>

{% include "components/pagination.html" with page_obj=page_obj %}

{% endblock %}