{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/notifications.css">
{% endblock %}
{% block content %}
<div class="notifications-page">
    <div class="notifications-header">
        <h2>Notifications</h2>
        <form method="POST" action="/notifications/mark-all-read" style="display:inline;">
            <button type="submit" class="btn btn-ghost btn-sm">Clear</button>
        </form>
    </div>

    <div class="notifications-list">
        {% for group in notification_groups %}
        <div class="notification-group">
            <div class="notification-group-label">{{ group.label }}</div>
            {% for item in group.entries %}
            <div class="notification-card {% if not item.notification['read'] %}unread{% endif %}">
                <a href="/profile/{{ item.actor['username'] if item.actor else '#' }}">
                <img src="{{ avatar_url('multiavatar', item.actor['username'] if item.actor else '?', 32) }}" class="avatar-img avatar-sm" alt="{{ item.actor['username'] if item.actor else '?' }}" loading="lazy">
                </a>
                <div class="notification-body">
                    <div class="notification-text">{{ item.notification['message'] }}</div>
                    <div class="notification-time">{{ item.time_ago }}</div>
                </div>
                <form method="POST" action="/notifications/mark-read/{{ item.notification['uid'] }}" style="display:inline;">
                    <button type="submit" class="notification-dismiss" data-uid="{{ item.notification['uid'] }}">&times;</button>
                </form>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">No notifications yet</div>
        {% endfor %}
    </div>
</div>
{% endblock %}