<!--Variables: 
    - target: The target div where the comments will be loaded    
    - content_type_id: The content type id of the object
    - object: The object to which the comments will be posted
-->
{% load bloomerp %}

<div class="p-2 mb-2">
        <form
            hx-post="{% url 'components_comments' %}"
            hx-trigger="submit"
            hx-target="{{ target }}"
            hx-swap="innerHTML"
        >
            {% csrf_token %}
            <div class="justify-content-start align-items-center d-flex gap-2">
                <div class="commentAuthor">
                    {% avatar object=request.user size="50px" class_name="rounded-circle" %}
                </div>

                <div class="flex-grow-1">
                    <textarea class="form-control" id="textArea{{target}}" name="content" oninput="document.getElementById('postCommentBtn{{target}}').classList.remove('d-none')" rows="2" placeholder="Write a comment..."></textarea>
                </div>

                <input type="hidden" name="content_type_id" value="{{ content_type_id }}">
                <input type="hidden" name="object_id" value="{{ object.pk }}">
            </div>

            <div id="postCommentBtn{{target}}" class="d-flex justify-content-end mt-2 d-none">
                <button 
                    type="submit" 
                    class="btn btn-primary" 
                    onclick="document.getElementById('textArea{{target}}').setAttribute('value','')">
                    Post
                </button>
            </div>
        </form>    
</div>
