<div class="compose-row {% if msg.outgoing %}is-out{% else %}is-in{% endif %}{% if msg.is_deleted %} is-deleted{% endif %}" data-ts="{{ msg.ts }}" data-message-id="{{ msg.id }}"{% if msg.reply_to_id %} data-reply-to-id="{{ msg.reply_to_id }}"{% endif %} data-reply-snippet="{{ msg.display_text|default:msg.text|default:''|truncatechars:120|escape }}">
  <article class="compose-bubble {% if msg.outgoing %}is-out{% else %}is-in{% endif %}">
    {% if msg.reply_to_id %}
      <div class="compose-reply-ref" data-reply-target-id="{{ msg.reply_to_id }}">
        <button type="button" class="compose-reply-link" title="Jump to referenced message">
          Reply to: {{ msg.reply_preview|default:"Referenced message"|escape }}
        </button>
      </div>
    {% endif %}
    <div class="compose-source-badge-wrap">
      <span class="tag is-light gia-badge compose-source-badge source-{{ msg.source_service|default:'web'|lower }}">{{ msg.source_label }}</span>
    </div>
    {% if msg.image_urls %}
      {% for image_url in msg.image_urls %}
        <figure class="compose-media">
          <img
            class="compose-image"
            src="{{ image_url }}"
            alt="Attachment"
            referrerpolicy="no-referrer"
            loading="lazy"
            decoding="async">
        </figure>
      {% endfor %}
    {% elif msg.image_url %}
      <figure class="compose-media">
        <img
          class="compose-image"
          src="{{ msg.image_url }}"
          alt="Attachment"
          referrerpolicy="no-referrer"
          loading="lazy"
          decoding="async">
      </figure>
    {% endif %}
    {% if not msg.hide_text %}
      <p class="compose-body">{{ msg.display_text|default:"(no text)" }}</p>
    {% else %}
      <p class="compose-body compose-image-fallback is-hidden">(no text)</p>
    {% endif %}
    {% if msg.edit_count %}
      <details class="compose-edit-history">
        <summary>Edited {{ msg.edit_count }} time{% if msg.edit_count != 1 %}s{% endif %}</summary>
        <ul>
          {% for edit in msg.edit_history %}
            <li>
              {% if edit.edited_display %}{{ edit.edited_display }}{% else %}Unknown time{% endif %}
              {% if edit.actor %} · {{ edit.actor }}{% endif %}
              {% if edit.source_service %} · {{ edit.source_service|upper }}{% endif %}
              <div class="compose-edit-diff">
                <span class="compose-edit-old">{{ edit.previous_text|default:"(empty)" }}</span>
                <span class="compose-edit-arrow">&rarr;</span>
                <span class="compose-edit-new">{{ edit.new_text|default:"(empty)" }}</span>
              </div>
            </li>
          {% endfor %}
        </ul>
      </details>
    {% endif %}
    {% if msg.reactions %}
      <div class="compose-reactions" aria-label="Message reactions">
        {% for reaction in msg.reactions %}
          <span
            class="tag is-light gia-badge compose-reaction-chip"
            data-emoji="{{ reaction.emoji|escape }}"
            data-actor="{{ reaction.actor|default:''|escape }}"
            data-source-service="{{ reaction.source_service|default:''|escape }}"
            title="{{ reaction.actor|default:'Unknown' }} via {{ reaction.source_service|default:'unknown'|upper }}">
            {{ reaction.emoji }}
          </span>
        {% endfor %}
      </div>
    {% endif %}
    <p class="compose-msg-meta">
      {{ msg.display_ts }}{% if msg.author %} · {{ msg.author }}{% endif %}
      {% if msg.is_edited %}
        <span class="tag is-light gia-badge compose-msg-flag is-edited" title="Message edited{% if msg.last_edit_display %} at {{ msg.last_edit_display }}{% endif %}">edited</span>
      {% endif %}
      {% if msg.is_deleted %}
        <span class="tag is-light gia-badge compose-msg-flag is-deleted" title="Deleted{% if msg.deleted_display %} at {{ msg.deleted_display }}{% endif %}{% if msg.deleted_actor %} by {{ msg.deleted_actor }}{% endif %}">deleted</span>
      {% endif %}
    </p>
    <button type="button" class="button is-white is-small compose-reply-btn" title="Reply to this message" aria-label="Reply to this message">
      <span class="icon is-small"><i class="fa-solid fa-reply"></i></span>
      <span class="compose-reply-btn-label">Reply</span>
    </button>
  </article>
</div>
