{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Schedules, with the truth about the systemd timer that executes them.
   A schedule row does nothing on its own -- cloudpanel-backup.timer fires
   cloudpanel-backup.service, and if that timer is dead this page says so
   instead of showing a reassuring "next run". {% endcomment %}

{% block title %}Scheduled backups{% endblock %}

{% block content %}
<div ng-controller="scheduleController">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Scheduled backups</h1>
      <p class="text-muted mb-0 small">
        Recurring backups run from a systemd timer on this server, not from your
        browser.
      </p>
    </div>
    <button class="btn btn-outline-secondary btn-sm" ng-click="refresh()" ng-disabled="loading">
      <i class="fas fa-rotate me-1"></i>
      <span ng-bind="loading ? 'Loading…' : 'Refresh'"></span>
    </button>
  </div>

  <!-- Timer truth ------------------------------------------------------- -->
  <div class="card mb-4" ng-class="timer.healthy ? 'border-success' : 'border-danger'" ng-cloak>
    <div class="card-body">
      <div class="d-flex flex-wrap align-items-start justify-content-between gap-3">
        <div>
          <h2 class="h6 mb-2">
            <i class="fas me-1"
               ng-class="timer.healthy ? 'fa-circle-check text-success' : 'fa-circle-exclamation text-danger'"></i>
            Scheduler status
          </h2>
          <p class="mb-1 small">
            <code ng-bind="timer.unit"></code>
            is <strong ng-bind="timer.activeState"></strong>
            (<span ng-bind="timer.unitFileState"></span>)
          </p>
          <p class="mb-0 small fw-semibold"
             ng-class="timer.healthy ? 'text-success' : 'text-danger'"
             ng-bind="timer.healthy
               ? 'Schedules below will actually run.'
               : 'Schedules below will NOT run.'"></p>
          <p class="mb-0 small text-muted mt-1" ng-show="timer.detail" ng-bind="timer.detail"></p>
        </div>
        <dl class="row mb-0 small" style="min-width: 15rem;">
          <dt class="col-6">Timer next fires</dt>
          <dd class="col-6" ng-bind="timer.nextRun || 'unknown'"></dd>
          <dt class="col-6">Timer last fired</dt>
          <dd class="col-6" ng-bind="timer.lastRun || 'never'"></dd>
          <dt class="col-6">Last result</dt>
          <dd class="col-6" ng-bind="timer.lastResult || 'unknown'"></dd>
        </dl>
      </div>
    </div>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-circle-exclamation me-1"></i>
    <span ng-bind="errorMessage"></span>
  </div>

  <div class="row g-4">
    <!-- new schedule ---------------------------------------------------- -->
    <div class="col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">New schedule</h2>
          <form novalidate ng-submit="add()">
            <div class="mb-3">
              <label class="form-label" for="cpSchedSite">Website</label>
              <select class="form-select" id="cpSchedSite" ng-model="form.domain"
                      ng-options="site for site in sites" required>
                <option value="">Choose a site…</option>
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label" for="cpSchedDest">Destination</label>
              <select class="form-select" id="cpSchedDest" ng-model="form.destinationId"
                      ng-options="d.id as (d.name + ' — ' + d.typeLabel) for d in destinations"
                      required>
                <option value="">Choose a destination…</option>
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label" for="cpSchedFreq">Frequency</label>
              <select class="form-select" id="cpSchedFreq" ng-model="form.frequency">
                <option value="hourly">Hourly</option>
                <option value="daily">Daily</option>
                <option value="weekly">Weekly</option>
                <option value="monthly">Monthly</option>
              </select>
              <div class="form-text text-warning" ng-show="form.frequency === 'hourly'" ng-cloak>
                The timer fires nightly, so an hourly schedule runs once a day in
                practice.
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label" for="cpSchedRetain">Keep this many archives</label>
              <input type="number" class="form-control" id="cpSchedRetain"
                     ng-model="form.retention" min="0" max="3650">
              <div class="form-text">0 keeps every archive forever.</div>
            </div>
            <button type="submit" class="btn btn-primary w-100"
                    ng-disabled="saving || !form.domain || !form.destinationId">
              <i class="fas fa-calendar-plus me-1"></i>
              <span ng-bind="saving ? 'Saving…' : 'Add schedule'"></span>
            </button>
          </form>
        </div>
      </div>
    </div>

    <!-- schedule list --------------------------------------------------- -->
    <div class="col-lg-8">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Active schedules</h2>

          <p class="text-muted small mb-0" ng-show="!schedules.length" ng-cloak>
            No schedules yet. Nothing is being backed up automatically.
          </p>

          <div class="table-responsive" ng-show="schedules.length" ng-cloak>
            <table class="table table-sm align-middle mb-0">
              <thead>
                <tr>
                  <th scope="col">Site</th>
                  <th scope="col">Destination</th>
                  <th scope="col">Every</th>
                  <th scope="col">Keep</th>
                  <th scope="col">Last / next</th>
                  <th scope="col" class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="s in schedules">
                  <td>
                    <span ng-bind="s.domain"></span>
                    <i class="fas fa-triangle-exclamation text-warning ms-1"
                       ng-show="s.warning" ng-attr-title="{$ s.warning $}"></i>
                  </td>
                  <td ng-bind="s.destination"></td>
                  <td ng-bind="s.frequencyLabel"></td>
                  <td ng-bind="s.retention === 0 ? 'all' : s.retention"></td>
                  <td class="small text-muted">
                    <div ng-bind="'last: ' + (s.lastRun || 'never')"></div>
                    <div ng-bind="'next: ' + (s.willRun ? (s.nextRun || 'unknown') : 'will not run')"
                         ng-class="{'text-danger': !s.willRun}"></div>
                  </td>
                  <td class="text-end text-nowrap">
                    <button class="btn btn-sm btn-outline-primary" ng-click="runNow(s)"
                            ng-disabled="running === s.id" title="Run now">
                      <i class="fas fa-play"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger" ng-click="remove(s)"
                            title="Delete">
                      <i class="fas fa-trash"></i>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="mt-3" ng-show="job" ng-cloak>
            <div class="d-flex justify-content-between small mb-1">
              <span ng-bind="'Manual run: ' + job.domain"></span>
              <span ng-bind="percentage + '%'"></span>
            </div>
            <div class="progress mb-2" style="height: 8px;">
              <div class="progress-bar" role="progressbar"
                   ng-class="{'bg-danger': failed, 'bg-success': done,
                              'progress-bar-striped progress-bar-animated': runningJob}"
                   ng-style="{width: percentage + '%'}"></div>
            </div>
            <p class="small text-muted mb-0" ng-bind="statusMessage"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ websites|json_script:"cp-backup-sites" }}
{{ destinations|json_script:"cp-backup-destinations" }}
{{ timer|json_script:"cp-backup-timer" }}
<script src="{% static 'backupManager/backupManager.js' %}"></script>
{% endblock %}