{% macro render_comment(item, depth=0) %}
<div class="comment" style="--comment-depth: {{ depth }};" 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 vote-up{% if item.my_vote == 1 %} voted{% endif %}" aria-label="Upvote" title="Upvote"{{ guest_disabled(user) }}>+</button>
        </form>
        <span class="comment-vote-count" data-vote-count="{{ item.comment['uid'] }}">{{ 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 vote-down{% if item.my_vote == -1 %} voted{% endif %}" aria-label="Downvote" title="Downvote"{{ guest_disabled(user) }}>-</button>
        </form>
    </div>

    <div class="comment-body" id="comment-{{ item.comment['uid'] }}" data-comment-uid="{{ item.comment['uid'] }}">
        <div class="comment-header">
            {% set _user = item.author %}{% set _size = 32 %}{% set _size_class = "sm" %}{% include "_avatar_link.html" %}
            {% set _user = item.author %}{% set _class = "comment-author" %}{% include "_user_link.html" %}
            <span class="comment-time">{{ dt_ago(item.comment.get('created_at')) if item.comment.get('created_at') else item.time_ago }}</span>
        </div>
        <div class="comment-text rendered-content" data-render data-raw="{{ item.comment['content'] }}">{{ item.comment['content'] }}</div>
        {% set attachments = item.get('attachments', []) %}
        {% if attachments %}
        {% include "_attachment_display.html" %}
        {% endif %}
        <div class="comment-actions">
            <button type="button" class="comment-action-btn" data-action="reply"{{ guest_disabled(user) }}><span class="icon">💬</span><span class="label"> Reply</span></button>
            {% if owns(item.comment, user) %}
            <button type="button" class="comment-action-btn" data-action="edit" data-edit-url="/comments/edit/{{ item.comment['uid'] }}"><span class="icon">✏️</span><span class="label"> Edit</span></button>
            <form method="POST" action="/comments/delete/{{ item.comment['uid'] }}" class="inline-form comment-delete-form" data-comment-uid="{{ item.comment['uid'] }}">
                <button type="submit" class="comment-action-btn" data-confirm="Delete this comment?"><span class="icon">🗑️</span><span class="label"> Delete</span></button>
            </form>
            {% endif %}
            {% set _type = "comment" %}{% set _uid = item.comment['uid'] %}{% set _reactions = item.reactions %}{% include "_reaction_bar.html" %}
        </div>

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