{% load i18n %}

<div class="card-comments-list mb-3">
    {% for comment in comments %}
        <div class="card bg-light border-0 mb-2">
            <div class="card-body p-2">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <strong class="small text-dark">
                        <i class="fas fa-user-circle me-1 text-primary"></i>
                        {{ comment.author.username }}
                    </strong>
                    <small class="text-muted" style="font-size: 0.75rem;">
                        {{ comment.created_at|date:"Y-m-d H:i" }}
                    </small>
                </div>
                <div class="small text-secondary" style="white-space: pre-wrap;">{{ comment.text }}</div>
            </div>
        </div>
    {% empty %}
        <div class="text-muted small text-center py-2">
            <em>{% trans "No comments yet." %}</em>
        </div>
    {% endfor %}
</div>