{% load bloomerp %}

<input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="{{csrf_token}}">

{% for comment in comments %}
    <div class="border mb-2 p-2 rounded">
        <div class="commentHeader justify-content-between d-flex mb-2">
            <div class="d-flex align-items-center gap-2">
                <div class="commentAuthor">
                    {% avatar object=request.user size="50px" class_name="rounded-circle" %}
                </div>
                <div class="fw-bold">{{comment.created_by}}</div>
                <div class="text-muted">{{comment.datetime_created}}</div>
            </div>
            
            {% if request.user == comment.created_by %}
            <div class="commentActions d-flex gap-2">
                <a
                    onclick="document.getElementById('commentContent{{comment.pk}}').classList.toggle('d-none'); document.getElementById('editComment{{comment.pk}}').classList.toggle('d-none')"
                    class="btn btn-sm btn-outline-primary">Edit</a>
                
                <button
                    type="button" 
                    class="btn btn-sm btn-outline-danger"
                    hx-post="{% url 'components_comments' %}?delete_comment_id={{comment.pk}}"
                    hx-trigger="click"
                    hx-target="#{{target}}"
                    hx-swap="innerHTML"
                    hx-include="#csrf_token"
                    >Delete</button>
            </div>
            {% endif %}
        </div>
        <div class="commentBody">
            <p id="commentContent{{comment.pk}}">{{comment.content}}</p>

            <div id="editComment{{comment.pk}}" class="d-none">
                <form
                    hx-post="{% url 'components_comments' %}?edit_comment_id={{comment.pk}}"
                    hx-trigger="submit"
                    hx-target="#{{target}}"
                    hx-swap="innerHTML"
                >
                    {% csrf_token %}
                <textarea class="form-control" id="editComment{{comment.pk}}Content" name="content">{{comment.content}}</textarea>
                <button type="submit" class="btn btn-sm btn-primary mt-1">Save</button>
            </div>
        </div>
    </div>
{% endfor %}

