{% load i18n %}
<c-vars row conversation thread_root />
<c-ui.chat.message sender="{% if row.own %}{% translate 'You' %}{% else %}{{ row.author }}{% endif %}" side="{% if row.own %}right{% else %}left{% endif %}" data-message-id="{{ row.message.pk }}" data-reaction-url="{% url 'components_im_reaction' conversation.pk row.message.pk %}">
        {% if row.message.deleted_at %}<p>{% translate 'Message deleted' %}</p>{% else %}
            {% if row.message.reply_to %}<c-features.instant_messaging.quote :message="row.message.reply_to" />{% endif %}
            <div data-message-body data-text-editor-body>{% if row.html %}{{ row.html }}{% else %}{{ row.message.body|linebreaksbr }}{% endif %}</div>
            {% for attachment in row.message.attachments.all %}<c-features.instant_messaging.attachment :attachment="attachment" />{% endfor %}
        {% endif %}
    <c-slot name="actions"><time>{{ row.message.sent_at|default:row.message.datetime_created|date:"M j, H:i" }}</time>
        {% if row.message.direction == "outbound" %}<span>{{ row.message.get_status_display }}</span>{% endif %}
        {% if conversation.provider_key == "internal" and not row.message.deleted_at %}<button type="button" data-quote-message="{{ row.message.pk }}">{% translate 'Quote' %}</button>{% endif %}
        {% if conversation.provider_key == "internal" and not thread_root %}<button type="button" hx-get="{% url 'components_conversation' conversation.pk %}?thread={{ row.message.pk }}" hx-target="closest .im-conversation-content" hx-swap="outerHTML">{% translate 'Thread' %} · {{ row.message.reply_count }}</button>{% endif %}
        {% if row.can_react %}
            <c-ui.dropdown.body trigger_icon_class="fa-regular fa-face-smile" trigger_aria_label="Add reaction" :fixed="True" width="w-56">
                <div class="im-emoji-picker" role="group" aria-label="{% translate 'Choose a reaction' %}">
                    {% for emoji in row.reaction_emojis %}<button type="button" data-reaction-emoji="{{ emoji }}" data-reaction-active="true" aria-label="{% translate 'React with' %} {{ emoji }}">{{ emoji }}</button>{% endfor %}
                </div>
            </c-ui.dropdown.body>
        {% endif %}
    </c-slot>
    <c-slot name="reactions">{% if row.reactions %}<div class="im-reactions">{% for reaction in row.reactions %}<c-features.instant_messaging.reaction :emoji="reaction.emoji" :count="reaction.count" :own="reaction.own" :enabled="row.can_react" />{% endfor %}</div>{% endif %}
</c-slot>
</c-ui.chat.message>