{% extends "base.html" %}
{% from "_ui.html" import icon, badge, alert %}

{% block page_header %}
<div class="page-header">
  <div>
    <div class="eyebrow"><a href="/backups">{{ icon('arrow-left', 'icon-sm') }} Резервные копии</a></div>
    <h1>Расписание копий</h1>
    <p class="lead">Сервер сам делает копии машин в выбранное время и хранит только последние, чтобы копии не заняли весь диск.</p>
  </div>
</div>
{% endblock %}

{% block alerts %}
  {% if error %}{{ alert('danger', error) }}{% endif %}
{% endblock %}

{% block content %}
<section class="grid grid-main">
  <article class="card">
    <form method="post" action="/backups/schedule" class="schedule-form">
      <div class="card-body form-grid">
        <label class="switch-row" style="cursor:pointer">
          <span class="switch-text"><strong>Делать копии автоматически</strong><span>Выключите, чтобы приостановить расписание. Уже сделанные копии останутся.</span></span>
          <input type="checkbox" name="enabled" value="1" {% if form.enabled %}checked{% endif %} style="width:20px;height:20px;accent-color:var(--brand)">
        </label>

        <div class="field">
          <span class="label">Как часто</span>
          <div class="options" style="grid-template-columns:repeat(auto-fit,minmax(200px,1fr))">
            <label class="option">
              <input type="radio" name="frequency" value="daily" {% if form.frequency == 'daily' %}checked{% endif %}>
              <span class="option-body"><span class="option-top"><span class="option-icon">{{ icon('calendar') }}</span></span><span class="option-title">Каждый день</span><span class="option-text">Для машин, в которых что-то меняется каждый день: сайты, базы, файлы.</span></span>
            </label>
            <label class="option">
              <input type="radio" name="frequency" value="weekly" {% if form.frequency == 'weekly' %}checked{% endif %}>
              <span class="option-body"><span class="option-top"><span class="option-icon">{{ icon('calendar-days') }}</span></span><span class="option-title">Раз в неделю</span><span class="option-text">Если машины меняются редко или места под копии немного.</span></span>
            </label>
          </div>
        </div>

        <div class="grid grid-2" style="align-items:start">
          <div class="field" data-when="weekly">
            <label for="weekday">День недели</label>
            <select class="select" id="weekday" name="weekday">
              {% for day in weekdays %}<option value="{{ loop.index0 }}" {% if form.weekday == loop.index0 %}selected{% endif %}>{{ day }}</option>{% endfor %}
            </select>
          </div>
          <div class="field">
            <label for="time">Время</label>
            <input class="input" id="time" type="time" name="time" value="{{ form.time }}" required>
            <span class="hint">По часам сервера. Лучше ночью, когда машинами никто не пользуется.</span>
          </div>
        </div>

        <div class="field">
          <span class="label">Какие машины копировать</span>
          <div class="options" style="grid-template-columns:repeat(auto-fit,minmax(200px,1fr))">
            <label class="option">
              <input type="radio" name="machines" value="all" {% if form.all_vms %}checked{% endif %}>
              <span class="option-body"><span class="option-title">Все машины</span><span class="option-text">Новые машины тоже попадут в копии сами.</span></span>
            </label>
            <label class="option">
              <input type="radio" name="machines" value="chosen" {% if not form.all_vms %}checked{% endif %}>
              <span class="option-body"><span class="option-title">Только отмеченные</span><span class="option-text">Например, без тестовых машин, которые не жалко.</span></span>
            </label>
          </div>
          <div class="stack-sm" data-when="chosen">
            {% for name in vm_names %}
              <label class="check"><input type="checkbox" name="vms" value="{{ name }}" {% if name in form.vms %}checked{% endif %}><span><strong>{{ name }}</strong></span></label>
            {% else %}
              <p class="subtle small">Машин на сервере пока нет.</p>
            {% endfor %}
          </div>
        </div>

        <div class="field" style="max-width:280px">
          <label for="keep">Сколько копий хранить</label>
          <input class="input" id="keep" type="number" name="keep" value="{{ form.keep }}" min="1" max="{{ keep_max }}" required>
          <span class="hint">Для каждой машины. Более старые автоматические копии удаляются сами.</span>
        </div>

        {{ alert('info', 'На время копирования работающая машина аккуратно выключается, а потом запускается снова. Машины копируются по очереди, так что каждая стоит только пока копируется она сама.') }}
      </div>
      <div class="card-footer">
        <a class="btn" href="/backups">Отмена</a>
        <button type="submit" class="btn btn-primary">{{ icon('check') }}Сохранить</button>
      </div>
    </form>
  </article>

  <aside class="stack">
    <article class="card">
      <div class="card-header"><h2>Как это работает</h2></div>
      <div class="checklist">
        {% set steps = [
          ('Старые копии удаляются сами', 'После удачной новой копии у машины остаются последние копии по расписанию, сколько вы указали. Копии, сделанные вручную, не удаляются.'),
          ('Неудачная копия ничего не удаляет', 'Если места не хватило или машина не выключилась, прежние копии остаются. Итог виден на странице «Резервные копии».'),
          ('Если сервер был выключен', 'Пропущенную копию сервер сделает в течение двух часов после включения. Если включили позже, копия будет в следующий раз.'),
          ('Обновления не мешают', 'Копии делает отдельная служба сервера, а не панель. Перезапуск панели их не прерывает.'),
        ] %}
        {% for title, text in steps %}
          <div class="check-item success">{{ icon('circle-check') }}<div><strong>{{ title }}</strong><span>{{ text }}</span></div></div>
        {% endfor %}
      </div>
    </article>
  </aside>
</section>
{% endblock %}