{% load blog_extras %}
{% load static %}

{% for comment in comments %}
<div class="comment-item" style="margin-left: {{ depth|add:20 }}px; border-left: 2px solid var(--border-light); padding-left: 15px; margin-bottom: 15px;">
    <div class="comment-meta">
        <strong>{{ comment.author_name }}</strong>
        <span style="color: var(--text-light); font-size: 0.9rem;">#{{ comment.id }}</span>
        <span style="color: var(--text-light); font-size: 0.9rem;">{{ comment.time_create|date:"d.m.Y H:i" }}</span>
        {% if not comment.is_moderated %}
            <span class="badge badge-warning">⏳ На модерации</span>
        {% endif %}
    </div>
    <div class="comment-content" style="margin: 5px 0;">
        {{ comment.content|linebreaks }}
    </div>
    {% if user.is_authenticated %}
        <button class="btn btn-sm btn-outline-primary reply-btn" 
                data-comment-id="{{ comment.id }}" 
                data-author="{{ comment.author_name }}">
            Ответить
        </button>
    {% endif %}
    {% with replies=comment.replies.all %}
        {% if replies %}
            <div class="replies" style="margin-top: 10px;">
                {% show_comments replies depth=forloop.parentloop.counter0|add:depth %}
            </div>
        {% endif %}
    {% endwith %}
</div>
{% empty %}
    <p>Комментариев пока нет.</p>
{% endfor %}