{% import "macros.html" as m %}
{% import "icons.html" as i %}
<div class="tin cg-screen-inner">
  <header class="tin-header">
    <span class="tin-back">{{ i.ic('chevron-left') }}</span>
    {% if dialog.others %}<img class="tin-avatar" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
    <span class="tin-name">{{ header_name }}</span>
    <span class="tin-actions">{{ i.ic('shield') }}</span>
  </header>

  {% if show_match_banner %}
  <div class="tin-match">
    {% if dialog.others %}<img class="tin-match-pic" src="{{ avatars[dialog.others[0].id] }}" alt="">{% endif %}
    <div class="tin-match-title">You matched with {{ header_name }}{% if matched_at %} on {{ m.date_label(matched_at) }}{% endif %}</div>
  </div>
  {% endif %}

  <div class="cg-msg-list tin-list">
    {% for group in groups %}
      <div class="tin-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 }} tin-row">
          {{ m.content_block(msg, caps, "tin") }}
        </div>
        {{ m.reactions(msg) }}
      {% endfor %}
    {% endfor %}
  </div>

  <div class="cg-input tin-input">
    <div class="tin-field">Type a message</div>
    <span class="tin-send">Send</span>
  </div>
</div>