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

  <div class="cg-msg-list wc-list">
    {% for group in groups %}
      <div class="wc-time"><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 }} wc-row">
          {% if not msg.is_self %}<img class="wc-avatar" src="{{ avatars[msg.sender.id] }}" alt="">{% endif %}
          <div class="wc-bubble wc-{{ side }}">{{ m.content_block(msg, caps, "wc") }}</div>
          {% if msg.is_self %}<img class="wc-avatar" src="{{ avatars[dialog.self_participant.id] }}" alt="">{% endif %}
        </div>
        {{ m.reactions(msg) }}
      {% endfor %}
    {% endfor %}
    {% if typing and dialog.others %}
      <div class="cg-row other wc-row">
        <img class="wc-avatar" src="{{ avatars[dialog.others[0].id] }}" alt="">
        <div class="wc-bubble wc-other">{{ m.typing_dots() }}</div>
      </div>
    {% endif %}
  </div>

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