{% extends "base.html" %}

{% block title %}Последовательности{% endblock %}

{% block content %}
<div class="flex items-center justify-between">
  <div>
    <h1 class="text-2xl font-semibold">Последовательности</h1>
    <p class="mt-1 text-sm text-slate-600">Несколько сообщений по порядку: текст, картинка и кнопки.</p>
  </div>
</div>

{% if saved %}
<div class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800">
  Изменения сохранены.
</div>
{% endif %}

{% if errors %}
<ul class="mt-4 list-disc rounded-lg border border-red-200 bg-red-50 p-3 pl-8 text-sm text-red-700">
  {% for error in errors %}<li>{{ error }}</li>{% endfor %}
</ul>
{% endif %}

<form method="post" action="/sequences" class="mt-6 rounded-lg border border-slate-200 bg-white p-4">
  <input type="hidden" name="csrf_token" value="{{ request.session.get('csrf', '') }}" />
  <h2 class="text-lg font-medium">Новая последовательность</h2>
  <div class="mt-3 grid gap-3 sm:grid-cols-4">
    <div>
      <label for="key" class="text-xs text-slate-500">Ключ</label>
      <input id="key" name="key" value="{{ form.key }}" placeholder="rules"
             class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-sm focus:border-sky-500 focus:outline-none" />
    </div>
    <div>
      <label for="title" class="text-xs text-slate-500">Название</label>
      <input id="title" name="title" value="{{ form.title }}"
             class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-sky-500 focus:outline-none" />
    </div>
    <div>
      <label for="description" class="text-xs text-slate-500">Описание</label>
      <input id="description" name="description" value="{{ form.description }}"
             class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-sky-500 focus:outline-none" />
    </div>
    <div class="flex items-end">
      <button type="submit" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700">
        Создать
      </button>
    </div>
  </div>
</form>

<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 sequence in sequences %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3">
          <a href="/sequences/{{ sequence.key }}" class="font-mono text-sky-700 hover:underline">{{ sequence.key }}</a>
        </td>
        <td class="px-4 py-3">{{ sequence.title }}<div class="text-xs text-slate-500">{{ sequence.description }}</div></td>
        <td class="px-4 py-3">{{ sequence.items }}</td>
        <td class="px-4 py-3 text-slate-500">{{ sequence.updated_at.strftime("%d.%m.%Y %H:%M") }}</td>
      </tr>
      {% else %}
      <tr><td colspan="4" class="px-4 py-6 text-center text-slate-500">Последовательностей пока нет.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}