{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} The dangerous page. Three deliberate steps: choose an archive, read its
   manifest, then confirm by re-typing the domain. Nothing is written to the
   target site until the third step. {% endcomment %}

{% block title %}Restore a site{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Restore a site</h1>
      <p class="text-muted mb-0 small">
        A restore overwrites the live site. The manifest is read and shown first,
        and nothing is written until you confirm.
      </p>
    </div>
    <span class="badge rounded-pill text-bg-secondary">
      Manifest schema understood: v{{ schemaVersion }}
    </span>
  </div>

  <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>This replaces files, databases and mail for the target domain.</strong>
      Take a fresh backup first if the current state still matters. Use
      <em>Verify only</em> to check an archive without touching anything.
    </div>
  </div>

  <!-- Step 1 ------------------------------------------------------------ -->
  <div class="card mb-4">
    <div class="card-body">
      <h2 class="h6 mb-3">
        <span class="badge rounded-pill text-bg-primary me-1">1</span>
        Choose the archive
      </h2>

      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label" for="cpRestoreSite">Target site</label>
          <select class="form-select" id="cpRestoreSite" ng-model="form.domain"
                  ng-change="reset()" ng-options="site for site in sites">
            <option value="">Choose a site…</option>
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label" for="cpRestoreDest">Destination</label>
          <select class="form-select" id="cpRestoreDest" ng-model="form.destinationId"
                  ng-change="reset(); listArchives()"
                  ng-options="d.id as (d.name + ' — ' + d.typeLabel) for d in destinations">
            <option value="">Choose a destination…</option>
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label" for="cpRestoreFile">Archive</label>
          <select class="form-select" id="cpRestoreFile" ng-model="form.fileName"
                  ng-change="reset()"
                  ng-options="a.name as a.name group by a.domain for a in archives">
            <option value="">Choose an archive…</option>
          </select>
          <div class="form-text" ng-show="listing" ng-cloak>Listing the destination…</div>
        </div>
      </div>

      <div class="d-flex flex-wrap gap-2 mt-3">
        <button class="btn btn-outline-primary" ng-click="inspect()"
                ng-disabled="busy || !ready()">
          <i class="fas fa-magnifying-glass me-1"></i>
          <span ng-bind="busy ? 'Reading…' : 'Read manifest'"></span>
        </button>
        <button class="btn btn-outline-secondary" ng-click="verify()"
                ng-disabled="busy || !ready()">
          <i class="fas fa-clipboard-check me-1"></i> Verify only (dry run)
        </button>
      </div>
      <p class="form-text mb-0 mt-2">
        Both buttons are read-only. <em>Verify only</em> additionally walks every
        member of the archive and compares the checksum.
      </p>
    </div>
  </div>

  <div class="alert alert-danger" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-circle-exclamation me-1"></i>
    <span ng-bind="errorMessage"></span>
    <ul class="mb-0 mt-2 small" ng-show="problems.length">
      <li ng-repeat="problem in problems" ng-bind="problem"></li>
    </ul>
  </div>

  <!-- Step 2 ------------------------------------------------------------ -->
  <div class="card mb-4" ng-show="manifest" ng-cloak>
    <div class="card-body">
      <h2 class="h6 mb-3">
        <span class="badge rounded-pill text-bg-primary me-1">2</span>
        What this archive contains
      </h2>

      <div class="row g-4">
        <div class="col-lg-6">
          <dl class="row mb-0 small">
            <dt class="col-sm-5">Domain in manifest</dt>
            <dd class="col-sm-7"><code ng-bind="manifest.domain"></code></dd>

            <dt class="col-sm-5">Created</dt>
            <dd class="col-sm-7" ng-bind="manifest.created"></dd>

            <dt class="col-sm-5">Written by</dt>
            <dd class="col-sm-7">
              <span ng-bind="manifest.panel || 'unknown'"></span>
              <span class="text-muted" ng-show="manifest.admin">
                (<span ng-bind="manifest.admin"></span>)
              </span>
            </dd>

            <dt class="col-sm-5">Schema version</dt>
            <dd class="col-sm-7">
              <span ng-bind="'v' + manifest.schemaVersion"></span>
              <span class="badge text-bg-success ms-1"
                    ng-show="manifest.schemaVersion <= manifest.panelSchemaVersion">supported</span>
            </dd>

            <dt class="col-sm-5">Document root</dt>
            <dd class="col-sm-7 text-break"><code ng-bind="manifest.documentRoot"></code></dd>

            <dt class="col-sm-5">Members in archive</dt>
            <dd class="col-sm-7" ng-bind="manifest.memberCount"></dd>
          </dl>
        </div>

        <div class="col-lg-6">
          <dl class="row mb-0 small">
            <dt class="col-sm-5">Databases</dt>
            <dd class="col-sm-7">
              <span ng-show="manifest.databases.length"
                    ng-bind="manifest.databases.join(', ')"></span>
              <span class="text-muted" ng-hide="manifest.databases.length">none</span>
            </dd>

            <dt class="col-sm-5">Mailboxes</dt>
            <dd class="col-sm-7" ng-bind="manifest.emailCount + ' account(s), '
                                          + manifest.forwarderCount + ' forwarder(s)'"></dd>

            <dt class="col-sm-5">DNS records</dt>
            <dd class="col-sm-7" ng-bind="manifest.dnsRecordCount"></dd>

            <dt class="col-sm-5">Vhost config</dt>
            <dd class="col-sm-7" ng-bind="manifest.hasVhost ? 'included' : 'not included'"></dd>

            <dt class="col-sm-5">Archive size</dt>
            <dd class="col-sm-7" ng-bind="humanSize(archive.size)"></dd>
          </dl>
        </div>
      </div>

      <hr>

      <div class="d-flex flex-wrap align-items-center gap-2">
        <span class="badge rounded-pill"
              ng-class="{'text-bg-success': archive.checksumState === 'match',
                         'text-bg-danger': archive.checksumState === 'mismatch',
                         'text-bg-warning': archive.checksumState === 'unrecorded',
                         'text-bg-secondary': archive.checksumState === 'unreadable'}">
          <i class="fas fa-fingerprint me-1"></i>
          <span ng-bind="checksumLabel()"></span>
        </span>
        <code class="small text-break" ng-bind="archive.checksum"></code>
      </div>
      <p class="form-text mb-0 mt-2" ng-show="archive.checksumState === 'unrecorded'">
        No checksum was recorded when this archive was written, so the panel can
        show the archive's current SHA-256 but cannot prove it is unchanged.
      </p>

      <div class="alert alert-success py-2 px-3 mt-3 mb-0" ng-show="verified" ng-cloak>
        <i class="fas fa-circle-check me-1"></i>
        <span ng-bind="verifyMessage"></span>
      </div>
    </div>
  </div>

  <!-- Step 3 ------------------------------------------------------------ -->
  <div class="card border-danger mb-4" ng-show="manifest" ng-cloak>
    <div class="card-body">
      <h2 class="h6 mb-3">
        <span class="badge rounded-pill text-bg-danger me-1">3</span>
        Confirm the restore
      </h2>

      <p class="small mb-3">
        This will overwrite <strong ng-bind="form.domain"></strong> with the
        contents above. Type the domain exactly to confirm.
      </p>

      <div class="row g-2 align-items-end">
        <div class="col-md-6">
          <label class="form-label" for="cpConfirmDomain">Re-type the domain</label>
          <input type="text" class="form-control" id="cpConfirmDomain"
                 ng-model="form.confirmDomain" autocomplete="off"
                 ng-attr-placeholder="{$ manifest.domain $}">
        </div>
        <div class="col-md-6">
          <button class="btn btn-danger w-100" ng-click="restore()"
                  ng-disabled="busy || !confirmMatches()">
            <i class="fas fa-rotate-left me-1"></i>
            <span ng-bind="busy ? 'Restoring…' : 'Restore now'"></span>
          </button>
        </div>
      </div>

      <div class="mt-4" ng-show="job" ng-cloak>
        <div class="d-flex justify-content-between small mb-1">
          <span>Restoring</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': running}"
               ng-style="{width: percentage + '%'}"></div>
        </div>
        <p class="small text-muted mb-0" ng-bind="statusMessage"></p>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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