{% extends 'layout/app.html.twig' %}

{% block title %}Notifications{% endblock %}
{% block page_title %}Notifications{% endblock %}

{% block page_actions %}
    {% if unread_notifications_count() > 0 %}
        <form method="post" action="{{ path('app_notification_read_all') }}">
            <input type="hidden" name="_token" value="{{ csrf_token('notifications-read-all') }}">
            <button type="submit" class="btn btn-secondary">Tout marquer comme lu</button>
        </form>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="card overflow-hidden">
        <ul class="divide-y divide-slate-100">
            {% for notification in notifications %}
                <li>
                    <a href="{{ path('app_notification_open', {id: notification.id}) }}" class="flex items-start gap-3 px-5 py-4 hover:bg-slate-50 {{ notification.read ? '' : 'bg-brand-50/40' }}">
                        <span class="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full {{ notification.read ? 'bg-slate-200' : 'bg-accent-500' }}"></span>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm {{ notification.read ? 'text-slate-600' : 'font-medium text-slate-900' }}">{{ notification.message }}</p>
                            <p class="mt-0.5 text-xs text-slate-400">{{ notification.createdAt|date }}</p>
                        </div>
                    </a>
                </li>
            {% else %}
                <li class="px-5 py-10 text-center text-sm text-slate-500">Aucune notification.</li>
            {% endfor %}
        </ul>
        {% if notifications.pageCount > 1 %}
            <div class="border-t border-slate-100 px-5 py-3">{{ knp_pagination_render(notifications) }}</div>
        {% endif %}
    </div>
{% endblock %}