{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/notifications.css') }}">
{% endblock %}
{% block content %}
<div class="notifications-page">
    <div class="notifications-header">
        <h2>Notifications</h2>
        <div class="notifications-actions">
            <button type="button" class="btn btn-ghost btn-sm" data-push-enable hidden><span class="icon">🔔</span>Enable push</button>
            <form method="POST" action="/notifications/mark-all-read">
                <button type="submit" class="btn btn-ghost btn-sm"><span class="icon">✅</span>Clear</button>
            </form>
        </div>
    </div>

    <div class="notifications-list" role="list" aria-label="Notifications">
        {% 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 card-link-host {% if not item.notification['read'] %}unread{% endif %}" role="listitem">
                {% if not item.notification['read'] %}<span class="sr-only">Unread notification. </span>{% endif %}
                {% set actor_username = item.actor['username'] if item.actor else '#' %}
                {% set _href = "/notifications/open/" ~ item.notification['uid'] %}
                {% set _label = item.notification['message'] %}
                {% include "_card_link.html" %}
                <span class="notif-icon-fixed">
                {% set _user = item.actor %}{% set _size = 32 %}{% set _size_class = "sm" %}{% include "_avatar_link.html" %}
                </span>
                <div class="notification-body">
                    <div class="notification-text rendered-title">{{ render_title(item.notification['message']) }}</div>
                    <div class="notification-time">{{ dt_ago(item.created_at) if item.created_at else item.time_ago }}</div>
                </div>
                <form method="POST" action="/notifications/mark-read/{{ item.notification['uid'] }}" class="inline-form">
                    <button type="submit" class="notification-dismiss" aria-label="Mark as read">&times;</button>
                </form>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">No notifications yet</div>
        {% endfor %}
    </div>

    {% if next_cursor %}
    <div class="load-more-wrap">
        <a href="/notifications?before={{ next_cursor }}" class="btn btn-secondary btn-sm"><span class="icon">&#x1F4C4;</span>Load More</a>
    </div>
    {% endif %}
</div>
{% endblock %}