{% load bloomerp %}

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

{% for comment in comments %}
    <div class="bg-white border border-gray-200 shadow-sm p-4 rounded mb-4">
        <div class="flex justify-between items-center mb-2">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10">
                    {% avatar object=request.user size="50px" class_name="rounded-full" %}
                </div>
                <div>
                    <div class="font-semibold text-gray-800">{{ comment.created_by }}</div>
                    <div class="text-xs text-gray-500">{{ comment.datetime_created }}</div>
                </div>
            </div>
            {% if request.user == comment.created_by %}
            <div class="flex gap-2">
                <a onclick="document.getElementById('commentContent{{ comment.pk }}').classList.toggle('hidden'); document.getElementById('editComment{{ comment.pk }}').classList.toggle('hidden')" class="text-blue-500 hover:text-blue-700 text-sm">
                    Edit
                </a>
                <button type="button" class="text-red-500 hover:text-red-700 text-sm"
                    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="text-gray-700">
            <p id="commentContent{{ comment.pk }}">{{ comment.content }}</p>
            <div id="editComment{{ comment.pk }}" class="hidden mt-2">
                <form hx-post="{% url 'components_comments' %}?edit_comment_id={{ comment.pk }}"
                      hx-trigger="submit"
                      hx-target="#{{ target }}"
                      hx-swap="innerHTML">
                    {% csrf_token %}
                    <textarea class="w-full border border-gray-300 rounded p-2" id="editComment{{ comment.pk }}Content" name="content">{{ comment.content }}</textarea>
                    <button type="submit" class="btn btn-primary btn-sm">
                        Save
                    </button>
                </form>
            </div>
        </div>
    </div>
{% endfor %}