{% extends "base.html" %}

{% block title %}Расписания{% endblock %}

{% block content %}
<div class="flex items-center justify-between">
  <h1 class="text-2xl font-semibold">Расписания</h1>
  <a href="/schedules/new" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700">
    Новое расписание
  </a>
</div>

<p class="mt-2 text-slate-600">
  Рассылки исполняет бот: он читает активные расписания из БД раз в минуту,
  поэтому правки применяются без перезапуска.
</p>

<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="hidden px-4 py-3 font-medium sm:table-cell">Дни</th>
        <th class="px-4 py-3 font-medium">Шаблон</th>
        <th class="hidden px-4 py-3 font-medium lg:table-cell">Таймзона</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 schedule in schedules %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3 font-mono">{{ "%02d:%02d" | format(schedule.hour, schedule.minute) }}</td>
        <td class="hidden px-4 py-3 sm:table-cell">{{ format_weekdays(schedule.weekdays) }}</td>
        <td class="px-4 py-3">
          <div class="font-mono text-sky-700">{{ schedule.template_key }}</div>
          <div class="text-xs text-slate-500">{{ schedule.description or schedule.template_description }}</div>
        </td>
        <td class="hidden px-4 py-3 text-slate-600 lg:table-cell">{{ schedule.timezone }}</td>
        <td class="px-4 py-3">
          {% if schedule.enabled %}
          <span class="rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800">включено</span>
          {% else %}
          <span class="rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-500">выключено</span>
          {% endif %}
        </td>
        <td class="px-4 py-3">
          <div class="flex items-center justify-end gap-2">
            <a href="/schedules/{{ schedule.id }}" class="text-sky-700 hover:underline">Изменить</a>
            <form method="post" action="/schedules/{{ schedule.id }}/toggle">
              <input type="hidden" name="csrf_token" value="{{ request.session.get('csrf', '') }}" />
              <button type="submit" class="text-slate-600 hover:underline">
                {% if schedule.enabled %}Выключить{% else %}Включить{% endif %}
              </button>
            </form>
            <form method="post" action="/schedules/{{ schedule.id }}/delete" onsubmit="return confirm('Удалить расписание?');">
              <input type="hidden" name="csrf_token" value="{{ request.session.get('csrf', '') }}" />
              <button type="submit" class="text-red-600 hover:underline">Удалить</button>
            </form>
          </div>
        </td>
      </tr>
      {% else %}
      <tr>
        <td colspan="6" class="px-4 py-6 text-center text-slate-500">Расписаний пока нет.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}