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

{% block title %}Notifications · LivreComment{% endblock %}

{% block body_class %}page-wide{% endblock %}

{% block body %}
    <header class="notifs-header">
        <h1>Notifications</h1>
    </header>

    {# Réglage push : activer/désactiver les notifs sur CET appareil. Rendu
       seulement si les clés VAPID sont configurées. Le controller Stimulus
       gère le cas « non supporté » (grise le toggle + explique). #}
    {% if webpush_enabled() %}
        <div data-controller="push-subscribe"
             data-push-subscribe-public-key-value="{{ webpush_public_key() }}"
             data-push-subscribe-token-value="{{ csrf_token('push') }}"
             data-push-subscribe-subscribe-url-value="{{ path('app_push_subscribe') }}"
             data-push-subscribe-unsubscribe-url-value="{{ path('app_push_unsubscribe') }}">
            <label style="display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); cursor: pointer;">
                <span>Notifications sur cet appareil</span>
                <input type="checkbox" data-push-subscribe-target="toggle" data-action="change->push-subscribe#toggle" style="width: 20px; height: 20px; flex: none;">
            </label>
            <p class="muted" data-push-subscribe-target="status" style="margin: var(--space-2) 0 var(--space-4); font-size: 0.9rem;"></p>
        </div>
    {% endif %}

    {% if notifications|length > 0 %}
        <ul class="notifs-list">
            {% for notif in notifications %}
                {% include 'components/_notification_card.html.twig' with { notif: notif } only %}
            {% endfor %}
        </ul>
    {% else %}
        <p class="notifs-empty">Rien pour l'instant. Reviens plus tard.</p>
    {% endif %}
{% endblock %}