{% extends "base.html" %}
{% block title %}История чата {{ max_user_id }}{% endblock %}
{% block content %}
<h1>История чата</h1>
<a href="/admin/chat-log" class="btn btn-secondary" style="margin-bottom:16px;display:inline-block">← К списку чатов</a>

<div class="card">
  <div style="display:flex;flex-direction:column;gap:10px">
    {% for msg in messages|reverse %}
      <div style="display:flex;{% if msg.direction == 'out' %}justify-content:flex-end{% endif %}">
        <div style="
          max-width:70%;
          padding:10px 14px;
          border-radius:12px;
          font-size:.9rem;
          line-height:1.5;
          {% if msg.direction == 'out' %}
            background:#1a73e8;color:white;border-bottom-right-radius:2px;
          {% else %}
            background:#f1f3f4;color:#333;border-bottom-left-radius:2px;
          {% endif %}
        ">
          {% if msg.text %}<div>{{ msg.text }}</div>{% endif %}
          {% if msg.attachment_json and msg.attachment_json != 'null' %}
            <div style="font-size:.8rem;opacity:.8;margin-top:4px">📎 Вложение</div>
          {% endif %}
          <div style="font-size:.75rem;opacity:.7;margin-top:4px;text-align:right">
            {{ msg.created_at[:16] }}
            {% if msg.direction == 'in' %} · входящее{% else %} · исходящее{% endif %}
          </div>
        </div>
      </div>
    {% else %}
      <p style="color:#999;text-align:center">История пуста</p>
    {% endfor %}
  </div>
</div>
{% endblock %}