{% extends "base.html" %}

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

{% block content %}
<div class="flex items-center justify-between">
  <h1 class="text-2xl font-semibold">Сообщения</h1>
  <div class="flex items-center gap-3">
    <span class="text-sm text-slate-500">{{ templates | length }} шаблонов</span>
    <a href="/messages/new" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700">
      Новый шаблон
    </a>
  </div>
</div>

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

<div class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800">
  Изменения применяются ботом без перезапуска — в течение <span class="font-mono">TEMPLATE_CACHE_TTL</span>
  секунд (по умолчанию 45). Если БД недоступна, бот использует тексты из кода.
</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="hidden px-4 py-3 font-medium sm:table-cell">Длина</th>
        <th class="hidden px-4 py-3 font-medium md:table-cell">Изменён</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="hidden px-4 py-3 text-slate-500 sm:table-cell">{{ template.text_length }}</td>
        <td class="hidden px-4 py-3 text-slate-500 md:table-cell">{{ template.updated_at.strftime("%d.%m.%Y %H:%M") }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}