{% import "macros.html" as m %}
{% import "icons.html" as i %}
<div class="snap cg-screen-inner">
  <header class="snap-header">
    <span class="snap-back">{{ i.ic('chevron-left') }}</span>
    {% if dialog.others %}<img class="snap-avatar" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
    <span class="snap-title">{{ header_name }}</span>
    <span class="snap-actions">{{ i.ic('phone') }}{{ i.ic('video') }}</span>
  </header>

  <div class="cg-msg-list snap-list">
    {% for group in groups %}
      {% for msg in group.messages %}
        {% set who = "me" if msg.is_self else "them" %}
        {% set t = msg.content.__class__.__name__ %}
        <div class="snap-msg snap-{{ who }}{% if is_run_start(msg) %} snap-rstart{% endif %}">
          {% if is_run_start(msg) %}<div class="snap-name">{{ "ME" if msg.is_self else msg.sender.name|upper }}</div>{% endif %}
          {% if t == 'Text' %}<div class="snap-text">{{ msg.content.body }}</div>
          {% elif t in ('Image','GIF','Sticker') %}{% set src = media_src(msg) %}{% if src %}<img class="snap-img" src="{{ src }}" alt="">{% else %}<div class="snap-img cg-img-placeholder"></div>{% endif %}
          {% else %}<div class="snap-text">{{ m.fallback_text(msg.content) }}</div>{% endif %}
        </div>
        {% if is_last_self(msg) %}<div class="snap-status">{{ "Opened" if last_self_read else "Delivered" }}</div>{% endif %}
      {% endfor %}
    {% endfor %}
  </div>

  <div class="cg-input snap-input">
    <span class="snap-cam">{{ i.ic('camera') }}</span>
    <div class="snap-field">Send a chat</div>
    <span class="snap-ic">{{ i.ic('smile') }}</span>
  </div>
</div>