{% import "macros.html" as m %}
{% import "icons.html" as i %}
<div class="igd">
  <aside class="igd-side">
    <header class="igd-side-head"><span class="igd-user">your_handle</span><span class="igd-newic">{{ i.ic('edit') }}</span></header>
    <div class="igd-tabs"><span class="igd-tab igd-tab-active">Messages</span><span class="igd-tab">Requests</span></div>
    <div class="igd-list">
      <div class="igd-chat igd-active">
        {% if dialog.others %}<img class="igd-av" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
        <div class="igd-cbody"><span class="igd-cname">{{ header_name }}</span><span class="igd-clast">{{ header_subtitle }}</span></div>
      </div>
      {% for c in [('mom_xo','Active 5m ago'),('travel.dani','You: 😍'),('jake_t','Active now'),('the_crew','Maya: lol'),('sara.lee','seen Tuesday')] %}
      <div class="igd-chat"><div class="igd-av igd-av-ph">{{ c[0][0] }}</div><div class="igd-cbody"><span class="igd-cname">{{ c[0] }}</span><span class="igd-clast">{{ c[1] }}</span></div></div>
      {% endfor %}
    </div>
  </aside>

  <section class="ig igd-main">
    <header class="igd-main-head">
      {% if dialog.others %}<img class="igd-main-av" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
      <div class="igd-main-peer"><span class="igd-main-name">{{ header_name }}</span><span class="igd-main-sub">{{ header_subtitle }}</span></div>
      <span class="igd-main-icons">{{ i.ic('phone') }}{{ i.ic('video') }}{{ i.ic('dots-horizontal') }}</span>
    </header>
    <div class="cg-msg-list igd-msgs">
      {% for group in groups %}
        <div class="ig-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 }} ig-row{% if is_run_start(msg) %} ig-rstart{% endif %}">
            <div class="ig-wrap">{{ m.content_block(msg, caps, "ig") }}</div>
          </div>
          {{ m.reactions(msg) }}
          {% if is_last_self(msg) and last_self_read %}<div class="ig-seen">Seen</div>{% endif %}
        {% endfor %}
      {% endfor %}
      {% if typing and dialog.others %}<div class="cg-row other ig-row ig-rstart"><div class="ig-wrap"><div class="ig-bubble ig-other">{{ m.typing_dots() }}</div></div></div>{% endif %}
    </div>
    <div class="igd-compose">
      <span class="igd-cic igd-cam">{{ i.ic('camera') }}</span>
      <div class="igd-field"><span class="igd-ph">Message...</span><span class="igd-field-ic">{{ i.ic('mic') }}{{ i.ic('sticker') }}</span></div>
    </div>
  </section>
</div>