{% extends "admin/_base.html" %}
{% block content %}
<header class="rio-page-header">
<nav class="rio-breadcrumbs"><a href="/admin">Home</a> ยท <span>{{ page_title }}</span></nav>
<div class="rio-page-actions">
<h1>{{ page_title }}</h1>
{% if unread_count > 0 %}
<form method="post" action="/admin/notifications/mark_all_read" class="rio-form-inline">
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
<button type="submit" class="rio-button rio-button--primary">Mark all read</button>
</form>
{% endif %}
</div>
<p class="rio-page-header__lead">
{% if unread_count > 0 %}
<strong>{{ unread_count }} unread.</strong>
{% else %}
All caught up.
{% endif %}
Project code emits notifications via
<code>rustio_admin::send_notification(db, user_id, message, url)</code>.
</p>
</header>
<section class="rio-section" aria-label="Notifications">
<header class="rio-section__header">
<div class="rio-section__heading">
<span class="rio-section__label">Inbox</span>
<h2 class="rio-section__title">{{ notifications|length }} message{% if notifications|length != 1 %}s{% endif %}</h2>
</div>
</header>
<div class="rio-card rio-card--quiet rio-list">
{% if notifications %}
<table class="rio-table rio-table--striped">
<thead><tr><th>When</th><th>Message</th><th>State</th></tr></thead>
<tbody>
{% for n in notifications %}
<tr>
<td title="{{ n.created_iso }}">{{ n.when_relative }}</td>
<td>
{% if n.url %}
<a href="{{ n.url }}">{{ n.message }}</a>
{% else %}
{{ n.message }}
{% endif %}
</td>
<td>
{% if n.unread %}
<span class="rio-pill rio-pill--badge-neutral">Unread</span>
{% else %}
<span class="rio-meta">read</span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="rio-empty-state">
<div class="rio-empty-state__icon">{{ icon("bell", class="rio-icon") }}</div>
<h3 class="rio-empty-state__title">No notifications</h3>
<p class="rio-empty-state__lead">
Notifications appear here as project code emits them.
Try <code>rustio_admin::send_notification(...)</code> from a
handler to test the flow.
</p>
</div>
{% endif %}
</div>
</section>
{% endblock %}