{% import "macros.html" as m %}
{% import "icons.html" as i %}
<div class="dcd">
  <nav class="dcd-rail">
    <div class="dcd-rail-ic dcd-home">{{ i.ic('dots-horizontal') }}</div>
    <div class="dcd-rail-line"></div>
    {% for s in ['M','D','G','K'] %}<div class="dcd-rail-ic dcd-srv">{{ s }}</div>{% endfor %}
    <div class="dcd-rail-ic dcd-add">+</div>
  </nav>

  <aside class="dcd-channels">
    <header class="dcd-srv-head">My Server {{ i.ic('chevron-down') }}</header>
    <div class="dcd-chan-list">
      <div class="dcd-cat">Text Channels</div>
      <div class="dcd-chan dcd-chan-active"><span class="dcd-hash">#</span> general</div>
      <div class="dcd-chan"><span class="dcd-hash">#</span> random</div>
      <div class="dcd-chan"><span class="dcd-hash">#</span> dev-team</div>
      <div class="dcd-chan"><span class="dcd-hash">#</span> memes</div>
      <div class="dcd-cat">Voice Channels</div>
      <div class="dcd-chan"><span class="dcd-spk">🔊</span> Lounge</div>
      <div class="dcd-chan"><span class="dcd-spk">🔊</span> Gaming</div>
    </div>
    <div class="dcd-userbar">
      <div class="dcd-user-av"></div>
      <div class="dcd-user-meta"><span class="dcd-user-name">you</span><span class="dcd-user-tag">#4096</span></div>
    </div>
  </aside>

  <section class="dcd-main">
    <header class="dcd-main-head"><span class="dcd-hash dcd-head-hash">#</span><span class="dcd-head-name">general</span><span class="dcd-head-topic">Welcome — be nice 🙂</span></header>
    <div class="cg-msg-list dcd-msgs">
      {% for group in groups %}
        <div class="dc-divider"><span>{{ m.date_label(group.date) }}</span></div>
        {% for msg in group.messages %}
          {% set t = msg.content.__class__.__name__ %}
          {% if is_run_start(msg) %}
            <div class="dc-msg dc-rstart">
              <img class="dc-avatar" src="{{ avatars[msg.sender.id] }}" alt="">
              <div class="dc-body">
                {% if msg.reply_to %}<div class="dc-reply"><img class="dc-reply-av" src="{{ avatars[msg.reply_to.sender.id] }}" alt=""><span class="dc-reply-name" style="color:{{ name_colors[msg.reply_to.sender.id] }}">{{ msg.reply_to.sender.name }}</span><span class="dc-reply-text">{{ m.reply_snippet(msg.reply_to) }}</span></div>{% endif %}
                <div class="dc-head"><span class="dc-name" style="color:{{ name_colors[msg.sender.id] }}">{{ msg.sender.name }}</span><span class="dc-time">Today at {{ m.time_label(msg.timestamp) }}</span></div>
                <div class="dc-content">{% if t == 'Text' %}<div class="dc-text">{{ msg.content.body }}</div>{% elif t in ('Image','GIF','Sticker') %}{% set src = media_src(msg) %}{% if src %}<img class="dc-img" src="{{ src }}" alt="">{% else %}<div class="dc-img cg-img-placeholder"></div>{% endif %}{% else %}<div class="dc-text">{{ m.fallback_text(msg.content) }}</div>{% endif %}</div>
                {% if msg.reactions %}<div class="dc-reacts">{% for r in msg.reactions %}<span class="dc-react">{{ r.emoji }} <b>1</b></span>{% endfor %}</div>{% endif %}
              </div>
            </div>
          {% else %}
            <div class="dc-msg dc-cont">
              <div class="dc-content">{% if t == 'Text' %}<div class="dc-text">{{ msg.content.body }}</div>{% elif t in ('Image','GIF','Sticker') %}{% set src = media_src(msg) %}{% if src %}<img class="dc-img" src="{{ src }}" alt="">{% else %}<div class="dc-img cg-img-placeholder"></div>{% endif %}{% else %}<div class="dc-text">{{ m.fallback_text(msg.content) }}</div>{% endif %}</div>
              {% if msg.reactions %}<div class="dc-reacts">{% for r in msg.reactions %}<span class="dc-react">{{ r.emoji }} <b>1</b></span>{% endfor %}</div>{% endif %}
            </div>
          {% endif %}
        {% endfor %}
      {% endfor %}
    </div>
    <div class="dcd-input">
      <span class="dcd-input-plus">{{ i.ic('plus') }}</span>
      <div class="dcd-field">Message #general</div>
      <span class="dcd-input-ic">{{ i.ic('smile') }}</span>
    </div>
  </section>
</div>