{# 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 flex flex-col items-end' if m.from_me else 'them flex flex-col items-start' }} mb-3"
     role="article"
     aria-label="{{ m.sender_name or 'You' }}, {{ m.ts }}">
  {% if is_group and not m.from_me and m.sender_name %}
    <div class="sender text-sm font-semibold text-app-text mb-0.5">{{ m.sender_name }}</div>
  {% endif %}
  {% if m.link_preview %}
    <a class="link-preview block max-w-xs rounded-lg overflow-hidden border border-app-border bg-app-surface hover:bg-app-surface-hover transition-colors" href="{{ m.link_preview.url }}" target="_blank" rel="noopener">
      <img class="w-full object-cover" style="max-height:200px" src="/attachment?path={{ m.link_preview.image_path | urlencode }}&size=thumb" alt="Link preview" loading="lazy">
      <div class="px-3 py-2">
        <div class="text-xs text-app-text-muted truncate">{{ m.link_preview.domain }}</div>
        <div class="text-sm text-app-primary truncate mt-0.5">{{ m.link_preview.url }}</div>
      </div>
    </a>
  {% endif %}
  {% if m.attachments %}
    {# Split: ready images go to the gallery grid; everything else falls through #}
    {% set ready_imgs = m.attachments | selectattr('kind', 'equalto', 'image') | selectattr('ready') | list %}
    {% set other_atts = (m.attachments | rejectattr('kind', 'equalto', 'image') | list)
                      + (m.attachments | selectattr('kind', 'equalto', 'image') | rejectattr('ready') | list) %}

    {# --- Gallery grid for ready images --- #}
    {% if ready_imgs %}
      {% set n = ready_imgs | length %}
      {# Choose grid class; cap display at 4 cells, show "+N" on the 4th when n>4 #}
      {% set grid_cls = 'gallery-' ~ (n if n <= 4 else '5p') %}
      {% set shown   = ready_imgs[:4] %}
      {% set overflow = n - 4 if n > 4 else 0 %}
      <div class="gallery-grid {{ grid_cls }} {{ 'rounded-br-sm' if m.from_me else 'rounded-bl-sm' }}"
           role="group" aria-label="Image gallery, {{ n }} photo{{ 's' if n != 1 else '' }}">
        {% for a in shown %}
          <div class="gallery-item">
            <a class="media" href="/attachment?path={{ a.path | urlencode }}&dl={{ a.name | urlencode }}" target="_blank" download="{{ a.name }}"
               aria-label="Image sent by {{ m.sender_name or 'You' }}">
              <img src="/attachment?path={{ a.path | urlencode }}&size=thumb" alt="Image sent by {{ m.sender_name or 'You' }}" loading="lazy">
            </a>
            {% if loop.index == 4 and overflow > 0 %}
              <div class="gallery-overflow">+{{ overflow }}</div>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    {% endif %}

    {# --- Non-gallery attachments: pending images, video, audio, files --- #}
    {% if other_atts %}
    <div class="attachments max-w-xs rounded-2xl overflow-hidden {{ 'rounded-br-sm' if m.from_me else 'rounded-bl-sm' }} flex flex-col gap-0.5">
    {% for a in other_atts %}
      {% if not a.ready %}
        <div class="attach pending flex items-center gap-2 text-sm text-app-text-muted px-4 py-2">
          <svg aria-hidden="true" class="w-4 h-4 text-app-text-faint animate-spin fill-app-primary" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
            <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
          </svg>
          <span>syncing attachment…</span>
        </div>
      {% elif a.kind == 'video' %}
        <video class="media w-full" controls preload="metadata"
               aria-label="{{ a.name }}"
               src="/attachment?path={{ a.path | urlencode }}&dl={{ a.name | urlencode }}"
               onerror="this.outerHTML = '<a class=&quot;bubble file-link text-sm text-app-text px-4 py-2&quot; href=&quot;/attachment?path={{ a.path | urlencode }}&amp;dl={{ a.name | urlencode }}&quot; target=&quot;_blank&quot;><svg class=&quot;w-4 h-4 inline mr-1&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; viewBox=&quot;0 0 24 24&quot;><polygon points=&quot;23 7 16 12 23 17 23 7&quot;/><rect x=&quot;1&quot; y=&quot;5&quot; width=&quot;15&quot; height=&quot;14&quot; rx=&quot;2&quot;/></svg>{{ a.name }}</a>'"></video>
      {% elif a.kind == 'audio' %}
        <audio class="media w-full px-2 py-2" controls preload="none"
               aria-label="{{ a.name }}"
               src="/attachment?path={{ a.path | urlencode }}&dl={{ a.name | urlencode }}"></audio>
      {% else %}
        <a class="bubble file-link text-sm text-app-text px-4 py-2" href="/attachment?path={{ a.path | urlencode }}&dl={{ a.name | urlencode }}" target="_blank" download="{{ a.name }}">
          <svg class="w-4 h-4 inline mr-1 text-app-text-muted" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>{{ a.name }}
        </a>
      {% endif %}
    {% endfor %}
    </div>
    {% endif %}
  {% endif %}
  {% if m.text and not m.link_preview %}<div class="bubble {{ 'max-w-xs lg:max-w-md px-4 py-2 rounded-2xl rounded-br-sm bg-app-primary text-app-on-primary' if m.from_me else 'max-w-xs lg:max-w-md px-4 py-2 rounded-2xl rounded-bl-sm bg-app-bubble-them text-app-text' }} text-sm"><div class="text">{{ m.text }}</div></div>{% endif %}
  <div class="ts text-xs text-app-text-faint mt-1">
    {{ m.ts }}
    {% if m.from_me and m.status and m.status != 'delivered' %}
      {% if m.status == 'failed' %}
        <span class="bg-app-danger-bg text-app-danger text-xs font-medium px-2 py-0.5 rounded-full delivery" title="{{ m.hint }}">{{ m.label }}</span>
      {% elif m.status == 'sent' %}
        <span class="bg-app-surface-alt text-app-text-muted text-xs font-medium px-2 py-0.5 rounded-full delivery" title="{{ m.hint }}">sent</span>
      {% else %}
        <span class="bg-app-warning-bg text-app-warning text-xs font-medium px-2 py-0.5 rounded-full delivery ghost-status" title="{{ m.hint }}">{{ m.label }}</span>
      {% endif %}
    {% endif %}
  </div>
</div>
{% endfor %}