{# Message bubble loop. Shared by _conversation.html (initial render) and
   _history_page.html (load-older paging). Expects `msgs` (list, oldest-first)
   and `is_group` (bool). #}
{% for m in msgs %}
<div class="msg {{ 'me' if m.from_me else 'them' }}{% if m.from_me and m.service == 'SMS' %} sms{% endif %}">
  {% if is_group and not m.from_me and m.sender_name %}
    <div class="sender">{{ m.sender_name }}</div>
  {% endif %}
  {% for a in m.attachments %}
    {% if not a.ready %}
      <div class="attach pending">
        <sl-spinner></sl-spinner>
        <span>syncing attachment…</span>
      </div>
    {% elif a.kind == 'image' %}
      <a class="media" href="/attachment?path={{ a.path | urlencode }}" target="_blank">
        <img src="/attachment?path={{ a.path | urlencode }}&size=thumb" alt="{{ a.name }}" loading="lazy">
      </a>
    {% elif a.kind == 'video' %}
      <video class="media" controls preload="metadata"
             src="/attachment?path={{ a.path | urlencode }}"
             onerror="this.outerHTML = '<a class=&quot;bubble file-link&quot; href=&quot;/attachment?path={{ a.path | urlencode }}&quot; target=&quot;_blank&quot;>🎬 {{ a.name }}</a>'"></video>
    {% elif a.kind == 'audio' %}
      <audio class="media" controls preload="none" src="/attachment?path={{ a.path | urlencode }}"></audio>
    {% else %}
      <a class="bubble file-link" href="/attachment?path={{ a.path | urlencode }}" target="_blank">📎 {{ a.name }}</a>
    {% endif %}
  {% endfor %}
  {% if m.text %}<div class="bubble"><div class="text">{{ m.text }}</div></div>{% endif %}
  <div class="ts">
    {{ m.ts }}
    {% if m.from_me and m.status and m.status != 'delivered' %}
      {% if m.status == 'failed' %}
        <sl-badge class="delivery" variant="danger" pill title="{{ m.hint }}">{{ m.label }}</sl-badge>
      {% elif m.status == 'sent' %}
        <sl-badge class="delivery" variant="neutral" pill title="{{ m.hint }}">sent</sl-badge>
      {% else %}
        <sl-badge class="delivery" variant="warning" pill pulse title="{{ m.hint }}">{{ m.label }}</sl-badge>
      {% endif %}
    {% endif %}
  </div>
</div>
{% endfor %}