{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Run a backup of one site to one destination and watch it progress.
   Angular interpolation is {$ ... $} here; Django's {{ }} is untouched. {% endcomment %}

{% block title %}Back up a site{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Back up a site</h1>
      <p class="text-muted mb-0 small">
        Files, databases, mailboxes, DNS records and the vhost configuration are
        written into one archive with a manifest describing exactly what is inside.
      </p>
    </div>
    <a class="btn btn-outline-secondary btn-sm" href="/backup/backupDestinations">
      <i class="fas fa-hard-drive me-1"></i> Destinations
    </a>
  </div>

  {% if not destinations %}
    <div class="alert alert-warning d-flex align-items-start gap-2" role="alert">
      <i class="fas fa-triangle-exclamation mt-1"></i>
      <div>
        <strong>No destination configured.</strong>
        A backup has nowhere to go until you add one.
        <a href="/backup/backupDestinations" class="alert-link">Add a destination</a>.
      </div>
    </div>
  {% endif %}

  <div class="row g-4">
    <div class="col-lg-5">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">What to back up</h2>

          <form novalidate ng-submit="start()">
            <div class="mb-3">
              <label class="form-label" for="cpSite">Website</label>
              <select class="form-select" id="cpSite" 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="cpDest">Destination</label>
              <select class="form-select" id="cpDest" 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 class="form-text" ng-show="selectedDestination()">
                <span ng-bind="selectedDestination().isRemote
                  ? 'The archive is written locally first, then uploaded.'
                  : 'The archive stays on this server.'"></span>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-label" for="cpType">Contents</label>
              <select class="form-select" id="cpType" ng-model="form.jobType">
                <option value="full">Full site — files, databases, mail, DNS</option>
              </select>
              <div class="form-text">
                Only full backups can be taken by hand. Incremental runs are
                driven by the scheduler, so this list does not offer options the
                panel would silently turn into a full backup anyway.
              </div>
            </div>

            <button type="submit" class="btn btn-primary w-100"
                    ng-disabled="busy || !form.domain || !form.destinationId">
              <i class="fas fa-box-archive me-1"></i>
              <span ng-bind="busy ? 'Running…' : 'Start backup'"></span>
            </button>
          </form>
        </div>
      </div>
    </div>

    <div class="col-lg-7">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Progress</h2>

          <div ng-show="!job && !result" ng-cloak class="text-muted small">
            Nothing running. Start a backup and the archive name, size and SHA-256
            checksum appear here when it finishes.
          </div>

          <div ng-show="job" ng-cloak>
            <div class="d-flex justify-content-between small mb-1">
              <span ng-bind="phaseLabel()"></span>
              <span ng-bind="percentage + '%'"></span>
            </div>
            <div class="progress mb-3" style="height: 8px;">
              <div class="progress-bar" role="progressbar"
                   ng-class="{'bg-danger': failed, 'progress-bar-striped progress-bar-animated': running}"
                   ng-style="{width: percentage + '%'}"></div>
            </div>
            <p class="small text-muted mb-0" ng-bind="statusMessage"></p>
          </div>

          <div class="alert alert-danger py-2 px-3 mt-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="mt-3" ng-show="result" ng-cloak>
            <div class="alert alert-success py-2 px-3">
              <i class="fas fa-circle-check me-1"></i> Backup completed.
            </div>
            <dl class="row mb-0 small">
              <dt class="col-sm-4">Archive</dt>
              <dd class="col-sm-8 text-break"><code ng-bind="result.fileName"></code></dd>

              <dt class="col-sm-4">Size</dt>
              <dd class="col-sm-8" ng-bind="humanSize(result.size)"></dd>

              <dt class="col-sm-4">Destination</dt>
              <dd class="col-sm-8" ng-bind="result.destination"></dd>

              <dt class="col-sm-4">SHA-256</dt>
              <dd class="col-sm-8">
                <code class="text-break" ng-show="result.checksum" ng-bind="result.checksum"></code>
                <span class="text-muted" ng-hide="result.checksum">
                  Not recorded — a restore from this archive will report its
                  checksum as unverified.
                </span>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mt-4">
    <div class="card-body">
      <div class="d-flex align-items-center justify-content-between mb-3">
        <h2 class="h6 mb-0">Archives at the selected destination</h2>
        <button class="btn btn-outline-secondary btn-sm" ng-click="listArchives()"
                ng-disabled="!form.destinationId || listing">
          <i class="fas fa-rotate me-1"></i>
          <span ng-bind="listing ? 'Loading…' : 'Refresh'"></span>
        </button>
      </div>

      <p class="text-muted small" ng-show="!archives.length" ng-cloak>
        Choose a destination and refresh to see what is stored there.
      </p>

      <div class="table-responsive" ng-show="archives.length" ng-cloak>
        <table class="table table-sm align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">Archive</th>
              <th scope="col">Site</th>
              <th scope="col">Size</th>
              <th scope="col">Written</th>
              <th scope="col" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="archive in archives">
              <td class="text-break"><code ng-bind="archive.name"></code></td>
              <td ng-bind="archive.domain"></td>
              <td ng-bind="humanSize(archive.size)"></td>
              <td class="text-muted" ng-bind="archive.modified"></td>
              <td class="text-end">
                <div class="btn-group btn-group-sm" role="group">
                  <button type="button" class="btn btn-outline-secondary" ng-click="download(archive)"
                          title="Download this archive">
                    <i class="fas fa-download"></i>
                  </button>
                  <button type="button" class="btn btn-outline-danger" ng-click="remove(archive)"
                          title="Delete this archive">
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{% comment %} json_script escapes the payload properly; never interpolate a Python repr
   straight into a <script> block. {% endcomment %}
{{ websites|json_script:"cp-backup-sites" }}
{{ destinations|json_script:"cp-backup-destinations" }}
<script src="{% static 'backupManager/backupManager.js' %}"></script>
{% endblock %}