{% comment %}
Shared chat bubble. Parameters: sender, message, datetime, side (left/right),
id, highlight, class. Slots: default (rich content), actions, reactions.
Additional attributes are forwarded to the article.
{% endcomment %}
{% load i18n %}
<c-vars sender="" message="" datetime="" side="left" id="" highlight="false" class="" background="" variant="" />
<article {% if id %}id="{{ id }}"{% endif %} class="im-message{% if side == 'right' %} im-own{% endif %} {{ class }}" {{ attrs }}>
    <div class="im-message-author">{{ sender }}</div>
    <div class="im-bubble {% if side == 'right' or background == 'primary' or variant == 'primary' %}bg-primary-50{% else %}bg-base{% endif %} {% if highlight == 'true' %}ring-4 ring-primary-500 animate-pulse{% endif %}">
        {% if slot %}{{ slot }}{% else %}<div data-message-body data-text-editor-body>{{ message|safe }}</div>{% endif %}
    </div>
    <div class="im-message-actions">
        {% if datetime %}<time datetime="{{ datetime|date:'c' }}">{{ datetime|date:"M j, H:i" }}</time>{% endif %}
        {{ actions }}
    </div>
    {{ reactions }}
</article>