{% import "macros.html" as m %}
{% import "icons.html" as i %}
<div class="twd">
  <aside class="twd-side">
    <header class="twd-side-head"><span class="twd-title">Messages</span><span class="twd-newic">{{ i.ic('edit') }}</span></header>
    <div class="twd-search"><span class="twd-search-ic">{{ i.ic('search') }}</span>Search Direct Messages</div>
    <div class="twd-list">
      <div class="twd-chat twd-active">
        {% if dialog.others %}<img class="twd-av" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
        <div class="twd-cbody"><div class="twd-crow"><span class="twd-cname">{{ header_name }}</span><span class="twd-chandle">{{ handle }}</span></div><span class="twd-clast">{{ groups[-1].messages[-1].content.body if groups and groups[-1].messages[-1].content.__class__.__name__ == 'Text' else 'Sent a photo' }}</span></div>
      </div>
      {% for c in [('Dani','@dani_codes','see you at the meetup!'),('News','@techcrunch','Breaking: ...'),('Mark','@markdev','lol same'),('Ava','@ava','thanks!!')] %}
      <div class="twd-chat"><div class="twd-av twd-av-ph">{{ c[0][0] }}</div><div class="twd-cbody"><div class="twd-crow"><span class="twd-cname">{{ c[0] }}</span><span class="twd-chandle">{{ c[1] }}</span></div><span class="twd-clast">{{ c[2] }}</span></div></div>
      {% endfor %}
    </div>
  </aside>

  <section class="tw twd-main">
    <header class="twd-main-head">
      {% if dialog.others %}<img class="twd-main-av" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
      <div class="twd-main-peer"><span class="twd-main-name">{{ header_name }}</span><span class="twd-main-sub">{{ handle }}</span></div>
      <span class="twd-main-icons">{{ i.ic('dots-horizontal') }}</span>
    </header>
    <div class="cg-msg-list twd-msgs">
      {% for group in groups %}
        <div class="tw-sep">{{ m.date_label(group.date) }}</div>
        {% for msg in group.messages %}
          {% set side = "self" if msg.is_self else "other" %}
          <div class="cg-row {{ side }} tw-row{% if is_run_start(msg) %} tw-rstart{% endif %}">
            <div class="tw-wrap">{{ m.content_block(msg, caps, "tw") }}{% if is_run_end(msg) %}<span class="tw-time">{{ m.time_label(msg.timestamp) }}</span>{% endif %}</div>
          </div>
          {{ m.reactions(msg) }}
        {% endfor %}
      {% endfor %}
      {% if typing and dialog.others %}<div class="cg-row other tw-row tw-rstart"><div class="tw-wrap"><div class="tw-bubble tw-other">{{ m.typing_dots() }}</div></div></div>{% endif %}
    </div>
    <div class="twd-compose"><span class="twd-cic">{{ i.ic('camera') }}</span><span class="twd-cic">{{ i.ic('sticker') }}</span><div class="twd-field">Start a new message</div><span class="twd-cic twd-send">{{ i.ic('send') }}</span></div>
  </section>
</div>