{% load static %}

<div class="comments-section">
    {% for comment in comments %}
        <div class="border-bottom pb-3 mb-3">
            <div class="d-flex align-items-start">
                <div class="me-3">
                    {% if comment.user.userprofile.profile_picture %}
                        <img src="{{ comment.user.userprofile.profile_picture.url }}" 
                             class="rounded-circle" width="32" height="32" alt="{{ comment.user.username }}">
                    {% else %}
                        <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center" 
                             style="width: 32px; height: 32px;">
                            <i class="fas fa-user text-white small"></i>
                        </div>
                    {% endif %}
                </div>
                <div class="flex-grow-1">
                    <h6 class="mb-1">{{ comment.user.username }}</h6>
                    <small class="text-muted">{{ comment.created_date|timesince }} ago</small>
                    <p class="mt-2 mb-0">{{ comment.text|linebreaks }}</p>
                </div>
            </div>
        </div>
    {% empty %}
        <p class="text-muted">No comments yet. Be the first to comment!</p>
    {% endfor %}
</div>