{% 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">Mark all read</button>
        </form>
    </div>

    <div class="notifications-list">
        {% for item in notifications %}
        <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>
        {% else %}
        <div class="empty-state">No notifications yet</div>
        {% endfor %}
    </div>
</div>
{% endblock %}