{% load i18n %}
<div id="comments-section-{{ object.id }}" class="im-theme flex flex-col xl:h-full xl:min-h-0">
    <c-ui.chat.container class="xl:min-h-0">
        {% for comment in comments %}
            <c-ui.chat.message id="comment-{{ comment.pk }}"
                highlight="{% if comment.pk|stringformat:'s' == highlighted_comment_id %}true{% endif %}"
                sender="{{ comment.created_by.get_full_name|default:comment.created_by|default:'Unknown' }}"
                :message="comment.content" :datetime="comment.datetime_created"
                side="{% if comment.created_by == request.user %}right{% else %}left{% endif %}" />
        {% endfor %}
    </c-ui.chat.container>
    <form id="comment-form-{{ object.id }}" class="im-composer-wrap" hx-post="{% url 'components_comments' content_type_id=content_type_id object_id=object.id %}"
        hx-target="#comments-section-{{ object.id }}" hx-sync="this:drop" hx-disabled-elt="find [data-chat-send]">
        {% csrf_token %}
        {% translate "Comment" as comment_label %}
        <c-ui.chat.composer name="comment" :label="comment_label" />
    </form>
</div>