{% 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"><span class="icon">&#x2705;</span>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 %}
            {% set target_url = item.notification.get('target_url', '') %}
            <div class="notification-card {% if not item.notification['read'] %}unread{% endif %}">
                {% set actor_username = item.actor['username'] if item.actor else '#' %}
                <a href="/profile/{{ actor_username }}" style="flex-shrink:0">
                <img src="{{ avatar_url('multiavatar', actor_username, 32) }}" class="avatar-img avatar-sm" alt="{{ actor_username }}" loading="lazy">
                </a>
                <div class="notification-body">
                    <div class="notification-text">{% if target_url %}<a href="{{ target_url }}" style="color:inherit;text-decoration:none">{% endif %}{{ item.notification['message'] }}{% if target_url %}</a>{% endif %}</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 %}