{% if comments is not empty %}
    {% for c in comments %}
    <div class="d-flex gap-3 mb-3">
        <div class="flex-shrink-0">
            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
                 style="width:36px;height:36px;font-weight:700;font-size:.88rem;">
                {{ c.getAuthorName() | slice(0,1) | upper }}
            </div>
        </div>
        <div class="flex-grow-1">
            <div class="d-flex align-items-center gap-2 mb-1">
                <span class="fw-semibold small">{{ c.getAuthorName() }}</span>
                {% if c.isInternal() %}
                    <span class="badge bg-secondary-subtle text-secondary" style="font-size:.7rem;">
                        <i class="bi bi-lock me-1"></i>{{ translations.comment_internal | default('Interne') }}
                    </span>
                {% endif %}
                <span class="text-muted smaller ms-auto">{{ c.getCreatedAt() | date('d/m/Y H:i') }}</span>
            </div>
            <div class="p-2 bg-light rounded small">{{ c.getBody() }}</div>
        </div>
    </div>
    {% endfor %}
{% else %}
<p class="text-muted small mb-0">{{ translations.no_comments | default('Aucun commentaire.') }}</p>
{% endif %}