{% import "macros.html" as m %}
{% import "icons.html" as i %}
<div class="wa cg-screen-inner{{ ' wa-wallpaper' if opts.show_wallpaper else '' }}"{% if wallpaper %} style="background:{{ wallpaper }}"{% endif %}>
  <header class="wa-header">
    <span class="wa-back">{{ i.ic('chevron-left') }}</span>
    {% if dialog.others %}<img class="wa-avatar" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
    <div class="wa-peer">
      <span class="wa-name">{{ header_name }}</span>
      <span class="wa-sub">{{ header_subtitle }}</span>
    </div>
    <span class="wa-icons">{{ i.ic('video') }}{{ i.ic('phone') }}{{ i.ic('dots-vertical') }}</span>
  </header>

  <div class="cg-msg-list wa-list">
    {% for group in groups %}
      <div class="wa-sep">{{ m.date_label(group.date) }}</div>
      {% for msg in group.messages %}
        {% set side = "self" if msg.is_self else "other" %}
        {% set t = msg.content.__class__.__name__ %}
        {% if t == "System" %}
          {{ m.content_block(msg, caps, "wa") }}
        {% else %}
        {% set gname = is_group and not msg.is_self and is_run_start(msg) %}
        <div class="cg-row {{ side }} wa-row{% if is_run_start(msg) %} wa-rstart{% endif %}">
          {% if is_group and not msg.is_self %}{% if is_run_end(msg) %}<img class="wa-gava" src="{{ avatars[msg.sender.id] }}" alt="">{% else %}<span class="wa-gava-sp"></span>{% endif %}{% endif %}
          <div class="wa-wrap">
          {% if t == "Text" and caps.supports(msg.content) %}
            <div class="wa-bubble wa-{{ side }}{% if is_run_start(msg) %} wa-tail{% endif %}">
              {% if gname %}<span class="wa-sender" style="color:{{ sender_colors[msg.sender.id] }}">{{ msg.sender.name }}</span>{% endif %}
              {% if msg.reply_to %}{{ m.reply_quote(msg.reply_to, 'wa') }}{% endif %}
              <span class="wa-text">{{ msg.content.body }}</span>
              <span class="wa-footer">{{ m.time_24(msg.timestamp) }}{% if msg.is_self %} {{ m.ticks(msg.status, "wa-read") }}{% endif %}</span>
            </div>
          {% elif t == "Voice" and caps.supports(msg.content) %}
            <div class="wa-bubble wa-voicebubble wa-{{ side }}{% if is_run_start(msg) %} wa-tail{% endif %}">
              {% if gname %}<span class="wa-sender" style="color:{{ sender_colors[msg.sender.id] }}">{{ msg.sender.name }}</span>{% endif %}
              {{ m.voice_inner(msg.content) }}
              <span class="wa-footer wa-footer-media">{{ m.time_24(msg.timestamp) }}{% if msg.is_self %} {{ m.ticks(msg.status, "wa-read") }}{% endif %}</span>
            </div>
          {% else %}
            <div class="wa-bubble wa-{{ side }}{% if is_run_start(msg) %} wa-tail{% endif %} wa-mediabubble">
              {% if gname %}<span class="wa-sender" style="color:{{ sender_colors[msg.sender.id] }}">{{ msg.sender.name }}</span>{% endif %}
              {{ m.content_block(msg, caps, "wa") }}
              <span class="wa-footer wa-footer-media">{{ m.time_24(msg.timestamp) }}{% if msg.is_self %} {{ m.ticks(msg.status, "wa-read") }}{% endif %}</span>
            </div>
          {% endif %}
          </div>
        </div>
        {{ m.reactions(msg) }}
        {% endif %}
      {% endfor %}
    {% endfor %}
    {% if typing and dialog.others %}
      <div class="cg-row other wa-row wa-rstart">
        <div class="wa-wrap"><div class="wa-bubble wa-other wa-tail">{{ m.typing_dots() }}</div></div>
      </div>
    {% endif %}
  </div>

  <div class="cg-input wa-input">
    <div class="wa-field">{{ i.ic('smile') }}<span class="wa-ph">Message</span><span class="wa-field-ic">{{ i.ic('paperclip') }}{{ i.ic('camera') }}</span></div>
    <span class="wa-send">{{ i.ic('mic') }}</span>
  </div>
</div>