{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Incremental (restic) backups.

   Two things this page exists to say out loud:

   1. A restic repository is encrypted with its password and nothing else.
      Lose the password and every snapshot in it is gone for good. The password
      is shown exactly once, at creation, inside a card the operator has to
      dismiss deliberately.
   2. A schedule row does not execute itself. The executor state is printed at
      the top, and when the unit is not installed the page says the schedule
      will never fire rather than showing a comforting "next run".

   Angular interpolation is {$ … $} here; Django's {{ }} still renders
   server-side. {% endcomment %}

{% block title %}Incremental backups{% endblock %}

{% block styles %}
<style>
  .cp-inc-secret {
    font-family: var(--cp-font-mono);
    font-size: 1.15rem;
    letter-spacing: .02em;
    word-break: break-all;
    background: var(--cp-bg-subtle);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding: .75rem 1rem;
  }
  .cp-inc-uri {
    font-family: var(--cp-font-mono);
    font-size: .8rem;
    word-break: break-all;
    color: var(--cp-neutral);
  }
  .cp-inc-tag {
    font-family: var(--cp-font-mono);
    font-size: .72rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    padding: .05rem .5rem;
    margin-right: .25rem;
    white-space: nowrap;
  }
  .cp-inc-repo.is-selected {
    border-color: var(--cp-primary);
    box-shadow: var(--cp-shadow);
  }
  .cp-inc-paths {
    font-family: var(--cp-font-mono);
    font-size: .72rem;
    color: var(--cp-neutral);
  }
</style>
{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Incremental backups</h1>
      <p class="text-muted mb-0 small">
        Deduplicated, encrypted restic snapshots. Only the blocks that changed
        since the last snapshot are written.
      </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>

  <!-- The password nobody can recover ----------------------------------- -->
  <div class="card border-danger mb-4" ng-show="newSecret" ng-cloak>
    <div class="card-body">
      <h2 class="h5 mb-2 text-danger">
        <i class="fas fa-key me-1"></i>
        Save this repository password now
      </h2>
      <p class="mb-2">
        This is the only key to every snapshot in
        <strong ng-bind="newSecret.name"></strong>. The panel does not keep a copy it
        can show you again, and restic has no recovery path, no reset and no
        support override. <strong>If this password is lost, every snapshot in this
        repository is permanently unreadable.</strong>
      </p>
      <div class="cp-inc-secret mb-2" ng-bind="newSecret.password"></div>
      <div class="d-flex flex-wrap gap-2 align-items-center">
        <button class="btn btn-outline-secondary btn-sm" ng-click="copySecret()">
          <i class="fas fa-copy me-1"></i>Copy to clipboard
        </button>
        <label class="form-check-label small ms-2">
          <input type="checkbox" class="form-check-input me-1" ng-model="secretSaved">
          I have stored this password somewhere safe
        </label>
        <button class="btn btn-danger btn-sm ms-auto" ng-disabled="!secretSaved"
                ng-click="dismissSecret()">
          Hide it
        </button>
      </div>
      <p class="small text-muted mb-0 mt-2" ng-show="newSecret.warning" ng-bind="newSecret.warning"></p>
    </div>
  </div>

  <!-- Does anything actually run the schedules? ------------------------- -->
  <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.installed ? timer.activeState : 'not installed'"></strong>
            <span ng-show="timer.installed">(<span ng-bind="timer.unitFileState"></span>)</span>
          </p>
          <p class="mb-0 small fw-semibold"
             ng-class="timer.healthy ? 'text-success' : 'text-danger'"
             ng-bind="timer.healthy
               ? 'Incremental schedules below will actually run.'
               : 'Incremental schedules below will NOT run on their own.'"></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-warning py-2 px-3" ng-show="!secretDir.ready" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i>
    <span ng-bind="secretDir.detail"></span>
    <div class="mt-1"><code ng-bind="secretDir.command"></code></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">
    <!-- repositories --------------------------------------------------- -->
    <div class="col-lg-4">
      <div class="card mb-4">
        <div class="card-body">
          <h2 class="h6 mb-3">New repository</h2>
          <form novalidate ng-submit="createRepository()">
            <div class="mb-3">
              <label class="form-label" for="cpRepoName">Name</label>
              <input type="text" class="form-control" id="cpRepoName"
                     ng-model="repoForm.name" maxlength="64" placeholder="nightly-restic">
            </div>
            <div class="mb-3">
              <label class="form-label" for="cpRepoDest">Destination</label>
              <select class="form-select" id="cpRepoDest" ng-model="repoForm.destinationId"
                      ng-options="d.id as (d.name + ' — ' + d.typeLabel) for d in destinations">
                <option value="">Choose a destination…</option>
              </select>
              <div class="form-text">
                The repository is created in a <code>restic/</code> directory under that
                destination's path.
              </div>
            </div>
            <div class="alert alert-danger py-2 px-3 small mb-3">
              <i class="fas fa-key me-1"></i>
              A password is generated and shown <strong>once</strong>. Losing it makes every
              snapshot in the repository permanently unrecoverable.
            </div>
            <button type="submit" class="btn btn-primary w-100"
                    ng-disabled="creating || !repoForm.name || !repoForm.destinationId || !secretDir.ready">
              <i class="fas fa-database me-1"></i>
              <span ng-bind="creating ? 'Initialising…' : 'Create repository'"></span>
            </button>
          </form>
        </div>
      </div>

      <div class="card">
        <div class="card-body">
          <h2 class="h6 mb-3">Repositories</h2>
          <p class="text-muted small mb-0" ng-show="!repositories.length" ng-cloak>
            No repositories yet. Nothing incremental is being backed up.
          </p>
          <div class="card cp-inc-repo mb-2" ng-repeat="r in repositories"
               ng-class="{'is-selected': selected.id === r.id}" ng-cloak>
            <div class="card-body py-2 px-3">
              <div class="d-flex justify-content-between align-items-start gap-2">
                <div class="flex-grow-1" role="button" ng-click="select(r)">
                  <div class="fw-semibold" ng-bind="r.name"></div>
                  <div class="small text-muted">
                    <span ng-bind="r.destinationName"></span> ·
                    <span ng-bind="r.snapshotCount + ' snapshot(s)'"></span>
                  </div>
                  <div class="cp-inc-uri" ng-bind="r.uri"></div>
                </div>
                <div class="text-end">
                  <span class="badge"
                        ng-class="{'bg-success': r.health.state === 'healthy',
                                   'bg-danger': r.health.state === 'damaged',
                                   'bg-secondary': r.health.state === 'unknown'}"
                        ng-attr-title="{$ r.health.message || 'This repository has not been checked yet.' $}"
                        ng-bind="r.health.state === 'healthy' ? 'verified'
                                 : (r.health.state === 'damaged' ? 'damaged' : 'unchecked')"></span>
                </div>
              </div>
              <div class="small mt-1" ng-show="r.state !== 'ready'"
                   ng-class="r.state === 'failed' ? 'text-danger' : 'text-muted'">
                <span ng-bind="r.state === 'initialising' ? 'Initialising…' : r.stateMessage"></span>
              </div>
              <div class="small text-muted" ng-show="r.lastSnapshot"
                   ng-bind="'last snapshot: ' + r.lastSnapshot"></div>
              <div class="small text-warning" ng-show="r.warning" ng-bind="r.warning"></div>
              <div class="small text-muted" ng-show="r.health.checkedOn"
                   ng-bind="'checked: ' + r.health.checkedOn"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- working area ---------------------------------------------------- -->
    <div class="col-lg-8">
      <div class="card" ng-show="!selected.id" ng-cloak>
        <div class="card-body text-muted small">
          Select a repository on the left to browse its snapshots, restore from one,
          edit its retention policy or check its integrity.
        </div>
      </div>

      <div ng-show="selected.id" ng-cloak>
        <!-- snapshot browser ------------------------------------------- -->
        <div class="card mb-4">
          <div class="card-body">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
              <h2 class="h6 mb-0">
                Snapshots in <span ng-bind="selected.name"></span>
                <span class="text-muted small" ng-show="repositorySize"
                      ng-bind="'· ' + humanSize(repositorySize) + ' stored'"></span>
              </h2>
              <div class="d-flex gap-2">
                <select class="form-select form-select-sm" ng-model="filterDomain"
                        ng-change="loadSnapshots()"
                        aria-label="Filter snapshots by website"
                        ng-options="site for site in sites">
                  <option value="">All my sites</option>
                </select>
                <button class="btn btn-sm btn-outline-secondary" ng-click="loadSnapshots()"
                        ng-disabled="listing" aria-label="Refresh the snapshot list">
                  <i class="fas fa-rotate" aria-hidden="true"></i>
                </button>
              </div>
            </div>

            <div class="row g-2 align-items-end mb-3">
              <div class="col-sm-6">
                <label class="form-label small" for="cpIncSite">Snapshot a site now</label>
                <select class="form-select form-select-sm" id="cpIncSite" ng-model="runForm.domain"
                        ng-options="site for site in sites">
                  <option value="">Choose a site…</option>
                </select>
              </div>
              <div class="col-sm-6">
                <button class="btn btn-sm btn-primary w-100" ng-click="runNow()"
                        ng-disabled="!runForm.domain || busy">
                  <i class="fas fa-camera me-1"></i>Take snapshot
                </button>
              </div>
            </div>

            <p class="text-muted small mb-0" ng-show="!snapshots.length && !listing">
              No snapshots yet in this repository.
            </p>

            <div class="table-responsive" ng-show="snapshots.length">
              <table class="table table-sm align-middle mb-0">
                <thead>
                  <tr>
                    <th scope="col">Taken</th>
                    <th scope="col">Id</th>
                    <th scope="col">Site</th>
                    <th scope="col">Host</th>
                    <th scope="col" class="text-end">Size</th>
                    <th scope="col">Tags / paths</th>
                    <th scope="col" class="text-end">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="s in snapshots">
                    <td class="text-nowrap" ng-bind="s.time"></td>
                    <td><code ng-bind="s.id"></code></td>
                    <td ng-bind="s.domain || '—'"></td>
                    <td class="small text-muted" ng-bind="s.host"></td>
                    <td class="text-end" ng-bind="s.size ? humanSize(s.size) : '—'"></td>
                    <td>
                      <span class="cp-inc-tag" ng-repeat="t in s.tags track by $index" ng-bind="t"></span>
                      <div class="cp-inc-paths" ng-repeat="p in s.paths" ng-bind="p"></div>
                    </td>
                    <td class="text-end text-nowrap">
                      <button class="btn btn-sm btn-outline-primary" ng-click="chooseRestore(s)"
                              title="Restore from this snapshot">
                        <i class="fas fa-rotate-left"></i>
                      </button>
                      <button class="btn btn-sm btn-outline-danger" ng-click="forget(s)"
                              ng-show="canManage" title="Forget this snapshot">
                        <i class="fas fa-trash"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- restore ----------------------------------------------------- -->
        <div class="card mb-4" ng-show="restoreForm.snapshotId">
          <div class="card-body">
            <h2 class="h6 mb-3">
              Restore snapshot <code ng-bind="restoreForm.snapshotId"></code>
            </h2>

            <div class="mb-3">
              <label class="form-label small" for="cpRestoreSite">Site</label>
              <select class="form-select form-select-sm" id="cpRestoreSite"
                      ng-model="restoreForm.domain" ng-options="site for site in sites">
                <option value="">Choose a site…</option>
              </select>
            </div>

            <div class="form-check mb-2">
              <input class="form-check-input" type="radio" id="cpRestoreAlt"
                     ng-model="restoreForm.mode" value="alternate">
              <label class="form-check-label" for="cpRestoreAlt">
                <strong>Restore to a separate directory</strong> (recommended)
                <div class="small text-muted">
                  Unpacked under the site's home directory so you can inspect or copy
                  files by hand. Nothing live is touched.
                </div>
              </label>
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="radio" id="cpRestoreLive"
                     ng-model="restoreForm.mode" value="inPlace">
              <label class="form-check-label" for="cpRestoreLive">
                <strong class="text-danger">Restore over the live site</strong>
                <div class="small text-muted">
                  The site's current files are replaced by the snapshot, and anything
                  added since the snapshot is deleted.
                </div>
              </label>
            </div>

            <div class="alert alert-danger py-2 px-3" ng-show="restoreForm.mode === 'inPlace'">
              <p class="mb-2 small">
                This replaces the live files of
                <strong ng-bind="restoreForm.domain || 'the selected site'"></strong>.
                Type the domain to confirm.
              </p>
              <input type="text" class="form-control form-control-sm"
                     ng-model="restoreForm.confirmText"
                     aria-label="Type the domain to confirm the in-place restore"
                     ng-attr-placeholder="{$ restoreForm.domain $}">
            </div>

            <div class="d-flex gap-2">
              <button class="btn btn-sm"
                      ng-class="restoreForm.mode === 'inPlace' ? 'btn-danger' : 'btn-primary'"
                      ng-click="restore()"
                      ng-disabled="busy || !restoreForm.domain ||
                                   (restoreForm.mode === 'inPlace' &&
                                    restoreForm.confirmText !== restoreForm.domain)">
                <i class="fas fa-rotate-left me-1"></i>
                <span ng-bind="restoreForm.mode === 'inPlace'
                               ? 'Replace the live site' : 'Restore for inspection'"></span>
              </button>
              <button class="btn btn-sm btn-outline-secondary" ng-click="cancelRestore()">
                Cancel
              </button>
            </div>
          </div>
        </div>

        <!-- retention --------------------------------------------------- -->
        <div class="card mb-4" ng-show="canManage">
          <div class="card-body">
            <h2 class="h6 mb-3">Retention policy</h2>
            <p class="small text-muted">
              restic keeps the newest snapshot in each window. A dry run is required
              before anything is deleted, and it lists exactly which snapshots go.
            </p>
            <div class="row g-2 mb-3">
              <div class="col-6 col-md-3">
                <label class="form-label small" for="cpKeepLast">Keep last</label>
                <input type="number" min="0" max="10000" class="form-control form-control-sm"
                       id="cpKeepLast" ng-model="retention.keepLast">
              </div>
              <div class="col-6 col-md-3">
                <label class="form-label small" for="cpKeepDaily">Keep daily</label>
                <input type="number" min="0" max="10000" class="form-control form-control-sm"
                       id="cpKeepDaily" ng-model="retention.keepDaily">
              </div>
              <div class="col-6 col-md-3">
                <label class="form-label small" for="cpKeepWeekly">Keep weekly</label>
                <input type="number" min="0" max="10000" class="form-control form-control-sm"
                       id="cpKeepWeekly" ng-model="retention.keepWeekly">
              </div>
              <div class="col-6 col-md-3">
                <label class="form-label small" for="cpKeepMonthly">Keep monthly</label>
                <input type="number" min="0" max="10000" class="form-control form-control-sm"
                       id="cpKeepMonthly" ng-model="retention.keepMonthly">
              </div>
            </div>
            <div class="d-flex gap-2 mb-3">
              <button class="btn btn-sm btn-outline-primary" ng-click="dryRun()" ng-disabled="busy">
                <i class="fas fa-vial me-1"></i>Dry run
              </button>
              <button class="btn btn-sm btn-danger" ng-click="applyRetention()"
                      ng-disabled="busy || !plan">
                <i class="fas fa-broom me-1"></i>Apply and prune
              </button>
              <button class="btn btn-sm btn-outline-secondary ms-auto" ng-click="check(false)"
                      ng-disabled="busy">
                <i class="fas fa-stethoscope me-1"></i>Check repository
              </button>
              <button class="btn btn-sm btn-outline-secondary" ng-click="check(true)"
                      ng-disabled="busy" title="Re-read and re-hash every pack. Slow.">
                Deep check
              </button>
            </div>

            <div ng-show="plan" ng-cloak>
              <p class="small mb-2">
                <strong ng-bind="plan.remove.length"></strong> snapshot(s) would be removed,
                <strong ng-bind="plan.keep.length"></strong> kept. Nothing has been deleted yet.
              </p>
              <div class="table-responsive" ng-show="plan.remove.length">
                <table class="table table-sm mb-0">
                  <thead>
                    <tr>
                      <th scope="col">Would be removed</th>
                      <th scope="col">Id</th>
                      <th scope="col">Site</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="s in plan.remove">
                      <td ng-bind="s.time"></td>
                      <td><code ng-bind="s.id"></code></td>
                      <td ng-bind="s.domain || '—'"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p class="small text-success mb-0" ng-show="!plan.remove.length">
                Nothing would be removed under this policy.
              </p>
            </div>
          </div>
        </div>

        <!-- progress ---------------------------------------------------- -->
        <div class="card mb-4" ng-show="operation" ng-cloak>
          <div class="card-body">
            <div class="d-flex justify-content-between small mb-1">
              <span ng-bind="operation.label"></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': busy}"
                   ng-style="{width: percentage + '%'}"></div>
            </div>
            <p class="small mb-0" ng-class="{'text-danger': failed, 'text-muted': !failed}"
               ng-bind="statusMessage"></p>
          </div>
        </div>
      </div>

      <!-- schedules ---------------------------------------------------- -->
      <div class="card">
        <div class="card-body">
          <h2 class="h6 mb-3">Incremental schedules</h2>

          <form novalidate ng-submit="saveSchedule()" class="row g-2 align-items-end mb-3">
            <div class="col-md-3">
              <label class="form-label small" for="cpIncSchedName">Name</label>
              <input type="text" class="form-control form-control-sm" id="cpIncSchedName"
                     ng-model="scheduleForm.name" maxlength="64">
            </div>
            <div class="col-md-3">
              <label class="form-label small" for="cpIncSchedDest">Destination</label>
              <select class="form-select form-select-sm" id="cpIncSchedDest"
                      ng-model="scheduleForm.destinationId"
                      ng-options="d.id as d.name for d in destinations">
                <option value="">Choose…</option>
              </select>
            </div>
            <div class="col-md-2">
              <label class="form-label small" for="cpIncSchedFreq">Frequency</label>
              <select class="form-select form-select-sm" id="cpIncSchedFreq"
                      ng-model="scheduleForm.frequency">
                <option value="hourly">Hourly</option>
                <option value="daily">Daily</option>
                <option value="weekly">Weekly</option>
                <option value="monthly">Monthly</option>
              </select>
            </div>
            <div class="col-md-2">
              <label class="form-label small" for="cpIncSchedRetain">Keep</label>
              <input type="number" min="0" max="3650" class="form-control form-control-sm"
                     id="cpIncSchedRetain" ng-model="scheduleForm.retention">
            </div>
            <div class="col-md-2">
              <button type="submit" class="btn btn-sm btn-primary w-100"
                      ng-disabled="savingSchedule || !scheduleForm.name || !scheduleForm.destinationId">
                <span ng-bind="scheduleForm.scheduleId ? 'Update' : 'Add'"></span>
              </button>
            </div>
            <div class="col-12">
              <div class="d-flex flex-wrap gap-3 small">
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input me-1"
                         ng-model="scheduleForm.websiteData"> Files
                </label>
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input me-1"
                         ng-model="scheduleForm.websiteDatabases"> Databases
                </label>
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input me-1"
                         ng-model="scheduleForm.websiteEmails"> Mailboxes
                </label>
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input me-1"
                         ng-model="scheduleForm.websiteSSLs"> Certificates
                </label>
                <label class="form-check-label">
                  <input type="checkbox" class="form-check-input me-1"
                         ng-model="scheduleForm.active"> Active
                </label>
                <button type="button" class="btn btn-link btn-sm p-0 ms-auto"
                        ng-show="scheduleForm.scheduleId" ng-click="resetScheduleForm()">
                  Cancel edit
                </button>
              </div>
            </div>
          </form>

          <p class="text-muted small mb-0" ng-show="!schedules.length" ng-cloak>
            No incremental schedules yet.
          </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">Name</th>
                  <th scope="col">Destination</th>
                  <th scope="col">Repository</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.name"></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.repositoryName || '— none —'"
                      ng-class="{'text-danger': !s.repositoryName}"></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="runSchedule(s)"
                            ng-disabled="busy" title="Run now">
                      <i class="fas fa-play"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" ng-click="editSchedule(s)"
                            title="Edit">
                      <i class="fas fa-pen"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger" ng-click="removeSchedule(s)"
                            title="Delete">
                      <i class="fas fa-trash"></i>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </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-incremental-timer" }}
{{ repositories|json_script:"cp-incremental-repos" }}
{{ secretDir|json_script:"cp-incremental-secretdir" }}
{{ retentionDefaults|json_script:"cp-incremental-retention" }}
{{ isAdmin|json_script:"cp-incremental-isadmin" }}
<script src="{% static 'backupManager/backupManager.js' %}"></script>
{% endblock %}