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

  <div class="cg-msg-list imsg-list">
    {% for group in groups %}
      <div class="cg-date-sep imsg-sep">
        <strong>{{ m.date_label(group.date) }}</strong> {{ m.time_label(group.messages[0].timestamp) }}
      </div>
      {% for msg in group.messages %}
        {% set side = "self" if msg.is_self else "other" %}
        <div class="cg-row {{ side }} imsg-row{% if is_run_end(msg) %} imsg-tail{% endif %}{% if is_run_start(msg) %} imsg-rstart{% endif %}">
          <div class="imsg-bubble-wrap">
            {% if msg.reply_to and msg.content.__class__.__name__ == "Text" %}
              <div class="imsg-quote imsg-quote-{{ side }}">{{ m.reply_snippet(msg.reply_to) }}</div>
              <div class="cg-bubble imsg-bubble imsg-{{ side }}">{{ msg.content.body }}</div>
            {% else %}
              {{ m.content_block(msg, caps, "imsg") }}
            {% endif %}
          </div>
        </div>
        {{ m.reactions(msg) }}
        {% if is_last_self(msg) %}
          <div class="cg-meta imsg-receipt">{{ "Read" if last_self_read else "Delivered" }}</div>
        {% endif %}
      {% endfor %}
    {% endfor %}
    {% if typing and dialog.others %}
      <div class="cg-row other imsg-row imsg-tail imsg-rstart">
        <div class="imsg-bubble-wrap"><div class="cg-bubble imsg-bubble imsg-other">{{ m.typing_dots() }}</div></div>
      </div>
    {% endif %}
  </div>

  <div class="cg-input imsg-input">
    <span class="imsg-plus">{{ i.ic('plus') }}</span>
    <div class="imsg-field">iMessage</div>
    <span class="imsg-send">{{ i.ic('arrow-up') }}</span>
  </div>
</div>