{# 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"
     hx-on::load="
       const m = document.getElementById('main');
       delete m.dataset.handle;
       delete m.dataset.chat;
     ">
  <header>
    <a class="back-btn" aria-label="back to conversation"
       href="#"
       hx-get="{{ back_url }}"
       hx-target="#main"
       hx-swap="innerHTML">‹</a>
    <div class="header-text">
      <h2>{{ name }}</h2>
      {% if subtitle %}<small>{{ subtitle }}</small>{% endif %}
    </div>
  </header>

  <div class="contact-body">
    <div class="contact-card">
      {% if kind == 'group' %}
      <div class="avatar fallback group contact-avatar">👥</div>
      {% else %}
      <img class="avatar contact-avatar"
           src="/avatar?handle={{ handle | urlencode }}"
           onerror="this.replaceWith(Object.assign(document.createElement('div'), {className:'avatar fallback contact-avatar', textContent: '{{ (name[:1] or '?') | upper }}'}))"
           alt="">
      {% endif %}
      <div class="contact-name">{{ name }}</div>
      {% if subtitle %}<div class="contact-sub">{{ subtitle }}</div>{% endif %}
    </div>

    <section class="contact-block">
      <h3>{{ 'Members' if kind == 'group' else 'Handles' }}</h3>
      <ul class="contact-handles">
        {% if kind == 'group' %}
          {% for m in members %}
          <li>
            <div class="contact-handle-meta">
              {% if m.name %}<span class="contact-handle-name">{{ m.name }}</span>{% endif %}
              <span class="contact-handle-id">{{ m.handle }}</span>
            </div>
            <span class="wl-cap {{ m.cap_class }}">{{ m.capability }}</span>
          </li>
          {% else %}
          <li class="empty">no members listed</li>
          {% endfor %}
        {% else %}
          {% for h in handles %}
          <li>
            <span class="contact-handle-id">{{ h.handle }}</span>
            <span class="wl-cap {{ h.cap_class }}">{{ h.capability }}</span>
          </li>
          {% endfor %}
        {% endif %}
      </ul>
    </section>

    <section class="contact-block">
      <h3>Photos &amp; videos
        {% if media %}<span class="contact-count">{{ media | length }}</span>{% endif %}
      </h3>
      {% if media %}
      <div class="contact-gallery">
        {% for a in media %}
          {% if a.kind == 'video' %}
          <a class="contact-gallery-item video"
             href="/attachment?path={{ a.path | urlencode }}"
             target="_blank"
             title="{{ a.name }}">
            <video src="/attachment?path={{ a.path | urlencode }}#t=0.1"
                   preload="metadata" muted playsinline></video>
            <span class="contact-gallery-badge">▶</span>
          </a>
          {% else %}
          <a class="contact-gallery-item"
             href="/attachment?path={{ a.path | urlencode }}"
             target="_blank"
             title="{{ a.name }}">
            <img src="/attachment?path={{ a.path | urlencode }}&size=thumb"
                 alt="{{ a.name }}" loading="lazy">
          </a>
          {% endif %}
        {% endfor %}
      </div>
      {% else %}
      <p class="contact-empty">No photos or videos exchanged yet.</p>
      {% endif %}
    </section>
  </div>
</div>