{% import "macros.html" as m %}
{% import "icons.html" as i %}
<div class="line cg-screen-inner">
  <header class="line-header">
    <span class="line-back">{{ i.ic('chevron-left') }}</span>
    <span class="line-title">{{ header_name }}</span>
    <span class="line-actions">{{ i.ic('phone') }}{{ i.ic('video') }}</span>
  </header>

  <div class="cg-msg-list line-list">
    {% for group in groups %}
      <div class="line-date"><span>{{ m.date_label(group.date) }}</span></div>
      {% for msg in group.messages %}
        {% set side = "self" if msg.is_self else "other" %}
        <div class="cg-row {{ side }} line-row{% if is_run_start(msg) %} line-rstart{% endif %}">
          {% if not msg.is_self %}
            {% if is_run_start(msg) %}<img class="line-avatar" src="{{ avatars[msg.sender.id] }}" alt="">{% else %}<span class="line-avaspace"></span>{% endif %}
          {% endif %}
          <div class="line-stack">
            {% if not msg.is_self and is_run_start(msg) %}<div class="line-name">{{ msg.sender.name }}</div>{% endif %}
            <div class="line-bubrow">
              {% if msg.is_self %}<span class="line-meta">{% if is_last_self(msg) and last_self_read %}<span class="line-read">Read</span>{% endif %}{{ m.time_24(msg.timestamp) }}</span>{% endif %}
              <div class="line-bubble line-{{ side }}{% if is_run_start(msg) %} line-tail{% endif %}">{{ m.content_block(msg, caps, "line") }}</div>
              {% if not msg.is_self %}<span class="line-meta">{{ m.time_24(msg.timestamp) }}</span>{% endif %}
            </div>
          </div>
        </div>
        {{ m.reactions(msg) }}
      {% endfor %}
    {% endfor %}
    {% if typing and dialog.others %}
      <div class="cg-row other line-row line-rstart">
        <img class="line-avatar" src="{{ avatars[dialog.others[0].id] }}" alt="">
        <div class="line-stack"><div class="line-bubrow"><div class="line-bubble line-other">{{ m.typing_dots() }}</div></div></div>
      </div>
    {% endif %}
  </div>

  <div class="cg-input line-input">
    <span class="line-ic">{{ i.ic('plus') }}</span>
    <span class="line-ic">{{ i.ic('camera') }}</span>
    <div class="line-field">Aa</div>
    <span class="line-ic">{{ i.ic('smile') }}</span>
  </div>
</div>