<section class="comments-section">
    <h3>Comments</h3>

    {% macro render_comment(item, depth=0) %}
    <div class="comment" style="margin-left: {{ depth * 1.5 }}rem;" data-depth="{{ depth }}">
        <div class="comment-votes">
            <form method="POST" action="/votes/comment/{{ item.comment['uid'] }}">
                <input type="hidden" name="value" value="1">
                <button type="submit" class="comment-vote-btn">+</button>
            </form>
            <span class="comment-vote-count">{{ item.votes.up - item.votes.down }}</span>
            <form method="POST" action="/votes/comment/{{ item.comment['uid'] }}">
                <input type="hidden" name="value" value="-1">
                <button type="submit" class="comment-vote-btn">-</button>
            </form>
        </div>

        <div class="comment-body" data-comment-uid="{{ item.comment['uid'] }}">
            <div class="comment-header">
                <a href="/profile/{{ item.author['username'] if item.author else '#' }}">
                <img src="{{ avatar_url('multiavatar', item.author['username'] if item.author else '?', 32) }}" class="avatar-img avatar-sm" alt="{{ item.author['username'] if item.author else '?' }}" loading="lazy">
                </a>
                <a href="/profile/{{ item.author['username'] if item.author else '#' }}" class="comment-author">{{ item.author['username'] if item.author else 'Unknown' }}</a>
                <span class="comment-time">{{ item.time_ago }}</span>
            </div>
            <div class="comment-text rendered-content" data-render>{{ item.comment['content'] }}</div>
            {% set attachments = item.get('attachments', []) %}
            {% if attachments %}
            {% include "_attachment_display.html" %}
            {% endif %}
            <div class="comment-actions">
                <button class="comment-action-btn" data-action="reply"><span class="icon">&#x1F4AC;</span>Reply</button>
                {% if user and item.comment['user_uid'] == user['uid'] %}
                <form method="POST" action="/comments/delete/{{ item.comment['uid'] }}" class="inline-form">
                    <button type="submit" class="comment-action-btn"><span class="icon">&#x1F5D1;&#xFE0F;</span>Delete</button>
                </form>
                {% endif %}
            </div>

            {% if item.children %}
            <div class="comment-replies">
                {% for child in item.children %}
                {{ render_comment(child, depth + 1) }}
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
    {% endmacro %}

    {% for item in comments %}
    {{ render_comment(item, 0) }}
    {% else %}
    <p class="no-comments-msg">No comments yet. Start the discussion.</p>
    {% endfor %}

    {% if user %}
    <form class="comment-form" method="POST" action="/comments/create">
        <input type="hidden" name="target_uid" value="{{ target_uid }}">
        <input type="hidden" name="target_type" value="{{ target_type }}">
        <a href="/profile/{{ user['username'] }}">
        <img src="{{ avatar_url('multiavatar', user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ user['username'] }}" loading="lazy">
        </a>
        <textarea name="content" placeholder="Your opinion goes here..." required maxlength="1000" class="emoji-picker-target" data-mention></textarea>
        <div class="comment-form-actions">
            <div class="attachment-upload-container" data-attachment-upload
                 data-max-size="{{ max_upload_size_mb() }}"
                 data-max-files="{{ max_attachments_per_resource() }}"
                 data-allowed-types="{{ allowed_file_types() }}"></div>
            <button type="submit" class="comment-form-submit"><span class="icon">&#x1F4E4;</span>Post</button>
        </div>
    </form>
    {% endif %}
</section>
