{% extends "base.html" %}
{% block title %}Notifications{% endblock %}
{% block content %}
<div class="bbs-header">
    <h1><i class="bi bi-bell-fill"></i> Notifications</h1>
</div>
<div class="mb-3">
    <form method="post" action="{{ url_for('notifications.mark_all_read') }}" class="d-inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-check2-all"></i> Mark all read</button>
    </form>
</div>
<div class="card">
    <div class="card-body p-0">
    {% if items %}
    <ul class="list-group list-group-flush">
    {% for n in items %}
        <li class="list-group-item {% if not n.is_read %}list-group-item-warning{% endif %}">
            <div class="d-flex justify-content-between">
                <div>
                    <strong>{{ n.title or n.kind }}</strong>
                    <div>{{ n.body or '' }}</div>
                </div>
                <small class="text-muted">{{ n.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
            </div>
            {% if n.target_url %}
            <form method="post" action="{{ url_for('notifications.mark_read', nid=n.id) }}" class="mt-1">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button class="btn btn-link btn-sm p-0">View →</button>
            </form>
            {% endif %}
        </li>
    {% endfor %}
    </ul>
    {% else %}
        <div class="p-3 text-muted">No notifications.</div>
    {% endif %}
    </div>
</div>
{% endblock %}