{% extends 'layouts/base.html.twig' %}

{% block title %}{{ trans('notifications.title') }} — {{ site.name }}{% endblock %}

{% block content %}
    <section class="page-header notifications-header">
        <div class="notifications-header-row">
            <div>
                <h1>{{ trans('notifications.title') }}</h1>
                <p class="muted">
                    {% if unread_count > 0 %}
                        {{ trans('notifications.unread_count', { count: unread_count }) }}
                    {% else %}
                        {{ trans('notifications.caught_up') }}
                    {% endif %}
                </p>
            </div>
            {% if unread_count > 0 %}
                <form method="post" action="/notifications/read-all">
                    {{ csrf_field() }}
                    <button type="submit" class="btn btn-small">{{ trans('notifications.mark_all_read') }}</button>
                </form>
            {% endif %}
        </div>
    </section>

    {% if notifications is empty %}
        <p class="muted notifications-empty">{{ trans('notifications.empty') }}</p>
    {% else %}
        <ul class="notification-list">
            {% for item in notifications %}
                <li class="notification-item{% if item.is_unread %} is-unread{% endif %} type-{{ item.event_type }}">
                    <a class="notification-item-link" href="/notifications/{{ item.id }}/go">
                        <span class="notification-item-message">{{ item.message }}</span>
                        <time class="notification-item-time muted" datetime="{{ item.created_at }}">{{ item.created_at|format_datetime }}</time>
                    </a>
                    {% if item.is_unread %}
                        <form class="notification-item-mark" method="post" action="/notifications/{{ item.id }}/read">
                            {{ csrf_field() }}
                            <button type="submit" class="link-button" title="{{ trans('notifications.mark_read') }}" aria-label="{{ trans('notifications.mark_read') }}">✓</button>
                        </form>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>

        {% if page > 1 or has_more %}
            <nav class="pagination" aria-label="{{ trans('notifications.pages_aria') }}">
                {% if page > 1 %}
                    <a class="btn btn-small" href="/notifications?page={{ page - 1 }}">{{ trans('common.newer') }}</a>
                {% endif %}
                {% if has_more %}
                    <a class="btn btn-small" href="/notifications?page={{ page + 1 }}">{{ trans('common.older') }}</a>
                {% endif %}
            </nav>
        {% endif %}
    {% endif %}
{% endblock %}