{# Item commentaire dans la liste sous une critique.

   Args :
     - comment : ReviewComment entity
     - is_owner : bool — l'utilisateur courant est-il l'auteur ?

   Pattern conversationnel léger : avatar à gauche, nom + body + meta
   alignés à droite. Pas de carte ni fond — juste un séparateur en bas.
#}
{% set c_author = comment.author %}
{% set c_avatar = user_avatar(c_author) %}

<li class="comment">
    <a class="comment__avatar-link" href="{{ path('app_profile_show', { handle: c_author.username }) }}" aria-label="Profil de {{ c_author.displayName ?: c_author.username }}">
        {% if c_avatar %}
            <img class="comment__avatar" src="{{ c_avatar }}" alt="" width="36" height="36" loading="lazy">
        {% else %}
            <span class="comment__avatar comment__avatar--placeholder" aria-hidden="true">
                {{ (c_author.displayName ?: c_author.username)|first|upper }}
            </span>
        {% endif %}
    </a>
    <div class="comment__main">
        <a class="comment__author" href="{{ path('app_profile_show', { handle: c_author.username }) }}">
            <span class="comment__name">
                <strong>{{ c_author.displayName ?: c_author.username }}</strong>
                <span class="comment__handle">@{{ c_author.username }}</span>
            </span>
        </a>
        <div class="comment__body">{{ comment.body|nl2br }}</div>
        <div class="comment__meta">
            <span class="comment__date">{{ comment.createdAt|temps_relatif }}</span>
            {% if is_owner %}
                <form method="post"
                      action="{{ path('app_review_comment_delete', { publicId: comment.publicId }) }}"
                      class="comment__delete-form"
                      onsubmit="return confirm('Supprimer ce commentaire ?');">
                    <input type="hidden" name="_token" value="{{ csrf_token('comment-delete-' ~ comment.publicId) }}">
                    <button type="submit" class="comment__delete-btn">Supprimer</button>
                </form>
            {% endif %}
        </div>
    </div>
</li>