{% for comment in comments %}
<div class="flex gap-3 mb-3">
    {% if comment.user.profile_picture %}
    <img class="h-8 w-8 rounded-full object-cover" src="{{ comment.user.profile_picture.url }}" alt="{{ comment.user.username }}">
    {% else %}
    <div class="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">
        <i class="fas fa-user text-gray-500 text-xs"></i>
    </div>
    {% endif %}
    <div class="flex-1 bg-white p-3 rounded-lg">
        <div class="flex justify-between items-start">
            <span class="font-semibold text-sm">{{ comment.user.username }}</span>
            <span class="text-xs text-gray-500">{{ comment.created_at|timesince }} আগে</span>
        </div>
        <p class="text-sm mt-1">{{ comment.content }}</p>
    </div>
</div>
{% empty %}
<p class="text-gray-500 text-sm text-center py-4">কোন মন্তব্য পাওয়া যায়নি</p>
{% endfor %}