{% import "macros.html" as m %}
{% import "icons.html" as i %}
<div class="wad" {% if wallpaper %}style="--wad-wall:{{ wallpaper }}"{% endif %}>
  <!-- left: chat list -->
  <aside class="wad-side">
    <header class="wad-side-head">
      <div class="wad-me"></div>
      <span class="wad-side-icons">{{ i.ic('dots-vertical') }}</span>
    </header>
    <div class="wad-search"><span class="wad-search-ic">{{ i.ic('search') }}</span><span>Search or start new chat</span></div>
    <div class="wad-chats">
      <div class="wad-chat wad-active">
        {% if dialog.others %}<img class="wad-chat-av" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
        <div class="wad-chat-body"><div class="wad-chat-top"><span class="wad-chat-name">{{ header_name }}</span><span class="wad-chat-time">{{ groups[-1].messages[-1].timestamp.strftime('%H:%M') if groups else '' }}</span></div>
          <div class="wad-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 [('Mom','Call me when you land ❤️','08:12','2'),('Work Group','Deploy is live 🚀','Yesterday',''),('Sam','haha yeah for sure','Yesterday',''),('Landlord','The plumber comes Friday','Tue',''),('Gym Buddies','who’s in for 7am?','Mon','5')] %}
      <div class="wad-chat">
        <div class="wad-chat-av wad-chat-av-ph">{{ c[0][0] }}</div>
        <div class="wad-chat-body"><div class="wad-chat-top"><span class="wad-chat-name">{{ c[0] }}</span><span class="wad-chat-time">{{ c[2] }}</span></div>
          <div class="wad-chat-row2"><div class="wad-chat-last">{{ c[1] }}</div>{% if c[3] %}<span class="wad-badge">{{ c[3] }}</span>{% endif %}</div></div>
      </div>
      {% endfor %}
    </div>
  </aside>

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

    <div class="cg-msg-list wad-msgs wa-wallpaper">
      {% 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 %}">
            <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 %}">{{ 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">{{ 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="wad-compose">
      <span class="wad-compose-ic">{{ i.ic('smile') }}</span>
      <span class="wad-compose-ic">{{ i.ic('paperclip') }}</span>
      <div class="wad-compose-field">Type a message</div>
      <span class="wad-compose-ic">{{ i.ic('mic') }}</span>
    </div>
  </section>
</div>