{# Contact / group-info page. Loaded into #main as a full-page swap, mirroring
   the conversation and settings views. The dataset.handle/chat reset clears
   the conversation routing flags so SSE refreshes don't try to update this
   page mid-view. #}
<div class="contact flex flex-col overflow-y-auto"
     hx-on::load="
       const m = document.getElementById('main');
       delete m.dataset.handle;
       delete m.dataset.chat;
     ">
  <header class="flex items-center gap-2 px-4 py-3 border-b border-app-border bg-app-surface flex-shrink-0">
    <a class="back-btn p-2 rounded-lg text-app-text-muted hover:bg-app-surface-hover"
       aria-label="back to conversation"
       href="#"
       hx-get="{{ back_url }}"
       hx-target="#main"
       hx-swap="innerHTML">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2"
           viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
        <path d="M15 18l-6-6 6-6"/>
      </svg>
    </a>
    <div class="flex-1 min-w-0">
      <h2 class="text-sm font-semibold text-app-text truncate">{{ name }}</h2>
      {% if subtitle %}<small class="text-xs text-app-text-muted truncate block">{{ subtitle }}</small>{% endif %}
    </div>
  </header>

  <div class="contact-body flex-1 overflow-y-auto">
    <div class="contact-card flex flex-col items-center py-6 px-4">
      {% if kind == 'group' %}
      <div class="w-16 h-16 rounded-full bg-app-surface-alt flex items-center justify-center text-2xl mb-3 contact-avatar">👥</div>
      {% else %}
      <img class="w-16 h-16 rounded-full object-cover mb-3 contact-avatar"
           src="/avatar?handle={{ handle | urlencode }}"
           onerror="this.replaceWith(Object.assign(document.createElement('div'), {className:'w-16 h-16 rounded-full bg-app-surface-alt flex items-center justify-center text-2xl font-semibold text-app-text-muted mb-3 contact-avatar', textContent: '{{ (name[:1] or "?") | upper }}'}))"
           alt="">
      {% endif %}
      <div class="contact-name text-base font-semibold text-app-text">{{ name }}</div>
      {% if subtitle %}<div class="contact-sub text-sm text-app-text-muted mt-0.5">{{ subtitle }}</div>{% endif %}
    </div>

    <div class="p-4 bg-app-surface border border-app-border rounded-lg shadow-sm mb-4 mx-4">
      <h3 class="text-base font-semibold text-app-text mb-3">{{ 'Members' if kind == 'group' else 'Handles' }}</h3>
      <ul class="contact-handles divide-y divide-app-border-subtle">
        {% if kind == 'group' %}
          {% for m in members %}
          <li class="flex items-center gap-2 py-2 text-sm">
            <div class="flex-1 min-w-0">
              {% if m.name %}<span class="contact-handle-name font-medium text-app-text block truncate">{{ m.name }}</span>{% endif %}
              <span class="contact-handle-id text-xs text-app-text-muted font-mono truncate block">{{ m.handle }}</span>
            </div>
            <span class="wl-cap {{ m.cap_class }} text-xs px-1.5 py-0.5 rounded font-medium">{{ m.capability }}</span>
          </li>
          {% else %}
          <li class="empty py-4 text-sm text-app-text-faint text-center">no members listed</li>
          {% endfor %}
        {% else %}
          {% for h in handles %}
          <li class="flex items-center gap-2 py-2 text-sm">
            <span class="contact-handle-id font-mono text-app-text-subtle flex-1 truncate">{{ h.handle }}</span>
            <span class="wl-cap {{ h.cap_class }} text-xs px-1.5 py-0.5 rounded font-medium">{{ h.capability }}</span>
          </li>
          {% endfor %}
        {% endif %}
      </ul>
    </div>

    <div class="p-4 bg-app-surface border border-app-border rounded-lg shadow-sm mb-4 mx-4">
      <h3 class="text-base font-semibold text-app-text mb-3">
        Photos &amp; videos
        {% if media %}<span class="contact-count ml-1 text-xs font-medium text-app-text-muted bg-app-surface-alt px-1.5 py-0.5 rounded">{{ media | length }}</span>{% endif %}
      </h3>
      {% if media %}
      <div class="contact-gallery grid grid-cols-3 gap-1.5">
        {% for a in media %}
          {% if a.kind == 'video' %}
          <a class="contact-gallery-item relative block rounded-lg overflow-hidden bg-black aspect-square"
             href="/attachment?path={{ a.path | urlencode }}"
             target="_blank"
             title="{{ a.name }}">
            <video class="w-full h-full object-cover"
                   src="/attachment?path={{ a.path | urlencode }}#t=0.1"
                   preload="metadata" muted playsinline></video>
            <span class="contact-gallery-badge absolute inset-0 flex items-center justify-center text-white text-lg bg-black/20">▶</span>
          </a>
          {% else %}
          <a class="contact-gallery-item block rounded-lg overflow-hidden bg-app-surface-alt aspect-square"
             href="/attachment?path={{ a.path | urlencode }}"
             target="_blank"
             title="{{ a.name }}">
            <img class="w-full h-full object-cover"
                 src="/attachment?path={{ a.path | urlencode }}&size=thumb"
                 alt="{{ a.name }}" loading="lazy">
          </a>
          {% endif %}
        {% endfor %}
      </div>
      {% else %}
      <p class="contact-empty py-4 text-sm text-app-text-faint text-center">No photos or videos exchanged yet.</p>
      {% endif %}
    </div>
  </div><!-- contact-body -->
</div><!-- contact -->