{# Card d'une notification dans la liste /notifications.

   Args :
     - notif : Notification entity (avec actor + targetReview + targetReview.work pré-fetched)

   Texte généré selon notif.type :
     - review_liked       → "{actor} a aimé ta critique de {book}"
     - review_commented   → "{actor} a commenté ta critique de {book}"
     - user_followed      → "{actor} te suit maintenant"

   Le wrapper <li> est cliquable et mène à la cible :
     - review_* → page critique
     - user_followed → profil de l'actor
#}
{% set actor = notif.actor %}
{% set actor_avatar = user_avatar(actor) %}
{% set actor_name = actor.displayName ?: actor.username %}

{% if notif.type.value == 'user_followed' %}
    {% set link = path('app_profile_show', { handle: actor.username }) %}
{% elseif notif.targetReview %}
    {% set link = path('app_review_show', { publicId: notif.targetReview.publicId }) %}
{% else %}
    {% set link = path('app_home') %}
{% endif %}

<li class="notif{{ notif.isRead ? '' : ' notif--unread' }}">
    <a class="notif__link" href="{{ link }}">
        {% if actor_avatar %}
            <img class="notif__avatar" src="{{ actor_avatar }}" alt="" width="40" height="40" loading="lazy">
        {% else %}
            <span class="notif__avatar notif__avatar--placeholder" aria-hidden="true">{{ actor_name|first|upper }}</span>
        {% endif %}
        <div class="notif__body">
            <p class="notif__text">
                <strong>{{ actor_name }}</strong>
                {% if notif.type.value == 'review_liked' %}
                    a aimé ta critique de
                    <em>{{ notif.targetReview.work.title }}</em>
                {% elseif notif.type.value == 'review_commented' %}
                    a commenté ta critique de
                    <em>{{ notif.targetReview.work.title }}</em>
                {% elseif notif.type.value == 'user_followed' %}
                    te suit maintenant
                {% endif %}
            </p>
            <p class="notif__date">{{ notif.createdAt|date('d M Y · H:i') }}</p>
        </div>
    </a>
</li>