{% extends "base.html" %}

{% block title %}Сообщения{% endblock %}

{% block content %}
<div class="flex items-center justify-between">
  <h1 class="text-2xl font-semibold">Сообщения</h1>
  <span class="text-sm text-slate-500">{{ templates | length }} шаблонов</span>
</div>

<p class="mt-2 text-slate-600">
  Тексты хранятся в Postgres. В редакторе можно проверить подстановку тегов
  <span class="font-mono">{tag}</span> на тестовых данных.
</p>

<div class="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">
  Правки пока не влияют на бота: он читает тексты из кода. Подключение шаблонов из БД —
  следующий шаг Блока 4 (4.5).
</div>

<div class="mt-6 overflow-x-auto rounded-lg border border-slate-200 bg-white">
  <table class="min-w-full divide-y divide-slate-200 text-sm">
    <thead class="bg-slate-50 text-left text-slate-600">
      <tr>
        <th class="px-4 py-3 font-medium">Ключ</th>
        <th class="px-4 py-3 font-medium">Описание</th>
        <th class="px-4 py-3 font-medium">Длина</th>
        <th class="px-4 py-3 font-medium">Изменён</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for template in templates %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3">
          <a href="/messages/{{ template.key }}" class="font-mono text-sky-700 hover:underline">{{ template.key }}</a>
        </td>
        <td class="px-4 py-3 text-slate-700">{{ template.description }}</td>
        <td class="px-4 py-3 text-slate-500">{{ template.text_length }}</td>
        <td class="px-4 py-3 text-slate-500">{{ template.updated_at.strftime("%d.%m.%Y %H:%M") }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}