{% extends "base.html" %}

{% block title %}{% if schedule.is_new %}Новое расписание{% else %}Расписание #{{ schedule.id }}{% endif %}{% endblock %}

{% block content %}
<p class="text-sm text-slate-500"><a href="/schedules" class="hover:underline">← Расписания</a></p>
<h1 class="mt-1 text-2xl font-semibold">
  {% if schedule.is_new %}Новое расписание{% else %}Расписание #{{ schedule.id }}{% endif %}
</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="{{ schedule.action }}" class="mt-6 max-w-3xl space-y-5">
  <input type="hidden" name="csrf_token" value="{{ request.session.get('csrf', '') }}" />
  <div>
    <label for="template_key" class="text-sm font-medium text-slate-700">Шаблон сообщения</label>
    <select
      id="template_key"
      name="template_key"
      class="mt-1 w-full rounded-lg border border-slate-300 p-2 text-sm focus:border-sky-500 focus:outline-none"
    >
      {% for template in message_templates %}
      <option value="{{ template.key }}" {% if template.key == schedule.template_key %}selected{% endif %}>
        {{ template.key }} — {{ template.description }}
      </option>
      {% endfor %}
    </select>
  </div>

  <div class="grid gap-4 sm:grid-cols-2">
    <div>
      <label for="hour" class="text-sm font-medium text-slate-700">Час (0–23)</label>
      <input
        id="hour"
        name="hour"
        type="number"
        min="0"
        max="23"
        value="{{ schedule.hour }}"
        class="mt-1 w-full rounded-lg border border-slate-300 p-2 text-sm focus:border-sky-500 focus:outline-none"
      />
    </div>
    <div>
      <label for="minute" class="text-sm font-medium text-slate-700">Минуты (0–59)</label>
      <input
        id="minute"
        name="minute"
        type="number"
        min="0"
        max="59"
        value="{{ schedule.minute }}"
        class="mt-1 w-full rounded-lg border border-slate-300 p-2 text-sm focus:border-sky-500 focus:outline-none"
      />
    </div>
  </div>

  <fieldset>
    <legend class="text-sm font-medium text-slate-700">Дни недели</legend>
    <p class="text-xs text-slate-500">Ничего не выбрано — каждый день.</p>
    <div class="mt-2 flex flex-wrap gap-4">
      {% for day, name in weekday_names.items() %}
      <label class="flex items-center gap-2 text-sm text-slate-700">
        <input type="checkbox" name="weekdays" value="{{ day }}" {% if day in schedule.weekdays %}checked{% endif %} />
        {{ name }}
      </label>
      {% endfor %}
    </div>
  </fieldset>

  <div>
    <label for="timezone" class="text-sm font-medium text-slate-700">Таймзона</label>
    <input
      id="timezone"
      name="timezone"
      type="text"
      value="{{ schedule.timezone }}"
      list="timezones"
      class="mt-1 w-full rounded-lg border border-slate-300 p-2 font-mono text-sm focus:border-sky-500 focus:outline-none"
    />
    <datalist id="timezones">
      <option value="Europe/Moscow"></option>
      <option value="Europe/Berlin"></option>
      <option value="UTC"></option>
    </datalist>
    <p class="mt-1 text-xs text-slate-500">Время указывается в этой таймзоне (IANA).</p>
  </div>

  <div>
    <label for="description" class="text-sm font-medium text-slate-700">Описание (для себя)</label>
    <input
      id="description"
      name="description"
      type="text"
      value="{{ schedule.description }}"
      maxlength="200"
      class="mt-1 w-full rounded-lg border border-slate-300 p-2 text-sm focus:border-sky-500 focus:outline-none"
    />
  </div>

  <label class="flex items-center gap-2 text-sm text-slate-700">
    <input type="checkbox" name="enabled" {% if schedule.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>
    <a href="/schedules" class="text-sm text-slate-600 hover:underline">Отмена</a>
  </div>
</form>

{% if not schedule.is_new %}
<div class="mt-10">
  <h2 class="text-lg font-medium">История изменений</h2>
  {% if history %}
  <ul class="mt-3 space-y-2">
    {% for item in history %}
    <li class="rounded-lg border border-slate-200 bg-white p-3 text-sm">
      <div class="flex items-center justify-between text-slate-500">
        <span>{{ item.changed_at.strftime("%d.%m.%Y %H:%M") }}</span>
        <span>редактор: {{ item.editor_id or "—" }}</span>
      </div>
      <details class="mt-2">
        <summary class="cursor-pointer text-slate-600">старое → новое</summary>
        <div class="mt-2 grid gap-3 sm:grid-cols-2">
          <pre class="max-h-48 overflow-auto rounded bg-slate-50 p-2 text-xs">{{ item.old_data | tojson(indent=2) if item.old_data else "—" }}</pre>
          <pre class="max-h-48 overflow-auto rounded bg-slate-50 p-2 text-xs">{{ item.new_data | tojson(indent=2) if item.new_data else "—" }}</pre>
        </div>
      </details>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="mt-2 text-sm text-slate-500">Изменений ещё не было.</p>
  {% endif %}
</div>
{% endif %}
{% endblock %}