{% import "icons.html" as i %}
<div class="cg-prev cg-prev-{{ hstyle }} cg-screen-inner" style="--acc:{{ accent }}">
  <header class="cg-prev-head">
    {% if hstyle == 'large' %}
      <div class="cg-prev-title-lg">{{ title }}</div>
      <span class="cg-prev-head-ic">{{ i.ic('edit') }}</span>
    {% else %}
      <span class="cg-prev-back">{{ i.ic('chevron-left') }}</span>
      <span class="cg-prev-title">{{ title }}</span>
      <span class="cg-prev-head-ic">{{ i.ic('dots-vertical') }}</span>
    {% endif %}
  </header>
  <div class="cg-prev-search">{{ i.ic('search') }}<span>{{ search_ph }}</span></div>
  <div class="cg-msg-list cg-prev-list">
    {% for c in chats %}
    <div class="cg-prev-row{{ ' pinned' if c.pinned else '' }}">
      <img class="cg-prev-av" src="{{ avatars[loop.index0] }}" alt="">
      <div class="cg-prev-body">
        <div class="cg-prev-r1">
          <span class="cg-prev-name">{{ c.name }}{% if c.muted %} <span class="cg-prev-mute">🔕</span>{% endif %}</span>
          <span class="cg-prev-time{{ ' unread' if c.unread else '' }}">{{ c.time }}</span>
        </div>
        <div class="cg-prev-r2">
          <span class="cg-prev-last">{% if c.sent %}<span class="cg-prev-tick">✓✓</span> {% endif %}{{ c.last }}</span>
          {% if c.unread %}<span class="cg-prev-badge{{ ' muted' if c.muted else '' }}">{{ c.unread }}</span>
          {% elif c.pinned %}<span class="cg-prev-pin">📌</span>{% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>