{% extends "base.html" %}

{% block title %}Новый шаблон{% endblock %}

{% block content %}
<p class="text-sm text-slate-500"><a href="/messages" class="hover:underline">← Сообщения</a></p>
<h1 class="mt-1 text-2xl font-semibold">Новый шаблон</h1>

{% 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="/messages" class="mt-6 max-w-3xl space-y-4">
  <input type="hidden" name="csrf_token" value="{{ request.session.get('csrf', '') }}" />

  <div class="grid gap-4 sm:grid-cols-2">
    <div>
      <label for="key" class="text-sm font-medium text-slate-700">Ключ</label>
      <input
        id="key"
        name="key"
        value="{{ key }}"
        placeholder="например, shop.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"
      />
      <p class="mt-1 text-xs text-slate-500">Латиница, цифры, точка, подчёркивание, дефис. По ключу шаблон выбирается в расписаниях.</p>
    </div>
    <div>
      <label for="description" class="text-sm font-medium text-slate-700">Описание</label>
      <input
        id="description"
        name="description"
        value="{{ description }}"
        maxlength="{{ max_description_length }}"
        placeholder="для себя и админов"
        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>

  <div>
    <label class="text-sm font-medium text-slate-700">Текст шаблона</label>
    <div class="mt-1">
      {% with editor_id="text", editor_name="text", editor_value=text, editor_max=max_length, editor_rows=16 %}
      {% include "partials/editor.html" %}
      {% endwith %}
    </div>
    <p class="mt-1 text-xs text-slate-500">
      Лимит Telegram — {{ max_length }} символов. Теги подставляет рендерер бота; неизвестный тег — ошибка.
    </p>
  </div>

  <label class="flex items-center gap-2 text-sm text-slate-700">
    <input type="checkbox" name="enabled" {% if enabled %}checked{% endif %} />
    Включён (бот читает текст)
  </label>

  <div class="flex items-center gap-3">
    <button type="submit" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700">
      Создать
    </button>
    <button
      type="button"
      class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
      hx-post="/messages/preview"
      hx-include="closest form"
      hx-target="#preview"
      hx-swap="innerHTML"
    >
      Предпросмотр
    </button>
    <a href="/messages" class="text-sm text-slate-600 hover:underline">Отмена</a>
  </div>
</form>

<div class="mt-8 max-w-3xl">
  <h2 class="text-lg font-medium">Предпросмотр</h2>
  <div id="preview" class="mt-2">
    <p class="text-sm text-slate-400">Нажмите «Предпросмотр», чтобы увидеть текст с тестовыми тегами.</p>
  </div>
</div>

<details class="mt-8 max-w-3xl rounded-lg border border-slate-200 bg-white p-4">
  <summary class="cursor-pointer text-sm font-medium text-slate-700">Доступные теги ({{ tags | length }})</summary>
  <dl class="mt-3 grid gap-x-6 gap-y-1 text-sm sm:grid-cols-2">
    {% for name, description in tags.items() %}
    <div class="flex gap-2">
      <dt class="font-mono text-sky-700">{ {{ name }} }</dt>
      <dd class="text-slate-600">{{ description }}</dd>
    </div>
    {% endfor %}
  </dl>
</details>
{% endblock %}