{% import "macros.html" as m %}
{% import "icons.html" as i %}
<div class="tgd" style="--tg-accent:{{ accent }};">
  <aside class="tgd-side">
    <header class="tgd-side-head">
      <span class="tgd-menu">{{ i.ic('dots-horizontal') }}</span>
      <div class="tgd-search"><span class="tgd-search-ic">{{ i.ic('search') }}</span><span>Search</span></div>
    </header>
    <div class="tgd-chats">
      <div class="tgd-chat tgd-active">
        {% if dialog.others %}<img class="tgd-chat-av" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
        <div class="tgd-chat-body"><div class="tgd-chat-top"><span class="tgd-chat-name">{{ header_name }}</span><span class="tgd-chat-time">{{ groups[-1].messages[-1].timestamp.strftime('%H:%M') if groups else '' }}</span></div>
          <div class="tgd-chat-last">{{ groups[-1].messages[-1].content.body if groups and groups[-1].messages[-1].content.__class__.__name__ == 'Text' else 'Media' }}</div></div>
      </div>
      {% for c in [('Saved Messages','Photo','09:30','','#3390ec'),('Family','Mom: dinner at 7?','08:15','3','#e17076'),('Dev Team','build passed ✅','Yesterday','','#6fb05f'),('Kate','see you tomorrow!','Yesterday','','#a695e7'),('News','Breaking: ...','Wed','12','#ee7aae')] %}
      <div class="tgd-chat">
        <div class="tgd-chat-av tgd-chat-av-ph" style="background:{{ c[4] }}">{{ c[0][0] }}</div>
        <div class="tgd-chat-body"><div class="tgd-chat-top"><span class="tgd-chat-name">{{ c[0] }}</span><span class="tgd-chat-time">{{ c[2] }}</span></div>
          <div class="tgd-chat-row2"><div class="tgd-chat-last">{{ c[1] }}</div>{% if c[3] %}<span class="tgd-badge">{{ c[3] }}</span>{% endif %}</div></div>
      </div>
      {% endfor %}
    </div>
  </aside>

  <section class="tgd-main">
    <header class="tgd-main-head">
      {% if dialog.others %}<img class="tgd-main-av" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
      <div class="tgd-main-peer"><span class="tgd-main-name">{{ header_name }}</span><span class="tgd-main-sub">{{ header_subtitle }}</span></div>
      <span class="tgd-main-icons">{{ i.ic('search') }}{{ i.ic('phone') }}{{ i.ic('dots-vertical') }}</span>
    </header>

    <div class="cg-msg-list tgd-msgs"{% if wallpaper %} style="background:{{ wallpaper }}"{% endif %}>
      {% 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__ %}
          {% if t == 'System' %}
          {{ m.content_block(msg, caps, 'tg') }}
          {% else %}
          {% set gname = is_group and not out and is_run_start(msg) %}
          <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="tgd-compose">
      <span class="tgd-compose-ic">{{ i.ic('paperclip') }}</span>
      <div class="tgd-compose-field">Message</div>
      <span class="tgd-compose-ic">{{ i.ic('smile') }}</span>
      <span class="tgd-compose-ic">{{ i.ic('mic') }}</span>
    </div>
  </section>
</div>