{% import "macros.html" as m %}
{% import "icons.html" as i %}
<div class="tg cg-screen-inner" style="--tg-accent: {{ accent }};{% if wallpaper %}background:{{ wallpaper }};{% endif %}">
  <header class="tg-nav">
    <div class="tg-nav-left"><span class="tg-chevron">{{ i.ic('chevron-left') }}</span></div>
    <div class="tg-title">
      <div class="tg-name">{{ header_name }}</div>
      <div class="tg-status">{{ header_subtitle }}</div>
    </div>
    {% if dialog.others %}<img class="tg-ava" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
  </header>

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

  <div class="tg-input">
    <span class="tg-ic">{{ i.ic('paperclip') }}</span>
    <div class="tg-field">Message</div>
    <span class="tg-ic">{{ i.ic('smile') }}</span>
    <span class="tg-ic tg-mic">{{ i.ic('mic') }}</span>
  </div>
</div>