{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Destinations. Secrets are write-only: the server sends a mask and a boolean,
   never the stored value, and an untouched field is sent back as the mask so
   the credential is left alone. {% endcomment %}

{% block title %}Backup destinations{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Backup destinations</h1>
      <p class="text-muted mb-0 small">
        Where archives are sent. Every destination can be tested, and the test
        writes, reads back and deletes a small object rather than just opening a
        connection.
      </p>
    </div>
    <button class="btn btn-primary btn-sm" ng-click="newDestination()">
      <i class="fas fa-plus me-1"></i> Add destination
    </button>
  </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">
    <!-- list ---------------------------------------------------------- -->
    <div class="col-xl-7">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Configured destinations</h2>

          <p class="text-muted small mb-0" ng-show="!destinations.length" ng-cloak>
            No destinations yet. Until one exists, no backup can be stored.
          </p>

          <div class="table-responsive" ng-show="destinations.length" ng-cloak>
            <table class="table table-sm align-middle mb-0">
              <thead>
                <tr>
                  <th scope="col">Name</th>
                  <th scope="col">Type</th>
                  <th scope="col">Location</th>
                  <th scope="col">Last verified</th>
                  <th scope="col" class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="d in destinations">
                  <td>
                    <span ng-bind="d.name"></span>
                    <span class="badge text-bg-secondary ms-1" ng-hide="d.active">disabled</span>
                  </td>
                  <td ng-bind="d.typeLabel"></td>
                  <td class="small text-break">
                    <span ng-show="d.type === 'local'"><code ng-bind="d.path"></code></span>
                    <span ng-show="d.type === 'sftp'"
                          ng-bind="d.username + '@' + d.host + ':' + d.port + d.path"></span>
                    <span ng-show="d.type === 's3' || d.type === 'b2'">
                      <code ng-bind="d.bucket"></code>
                      <span class="text-muted d-block" ng-bind="d.endpoint || d.region"></span>
                    </span>
                    <span ng-show="d.type === 'gdrive'">
                      <code ng-bind="d.folderId"></code>
                      <span class="text-muted d-block" ng-bind="d.serviceAccountEmail"></span>
                      <span class="badge text-bg-warning" ng-hide="d.hasServiceAccountKey">
                        key file missing
                      </span>
                    </span>
                  </td>
                  <td class="small text-muted">
                    <span ng-bind="d.lastVerified || 'never'"></span>
                  </td>
                  <td class="text-end text-nowrap">
                    <button class="btn btn-sm btn-outline-secondary" ng-click="edit(d)"
                            title="Edit">
                      <i class="fas fa-pen"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-primary" ng-click="test(d)"
                            ng-disabled="testing === d.id" title="Test connection">
                      <i class="fas fa-plug"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger" ng-click="remove(d)"
                            title="Delete">
                      <i class="fas fa-trash"></i>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="mt-3" ng-show="testResult" ng-cloak>
            <h3 class="h6 mb-2">
              Test of <span ng-bind="testResult.name"></span>
            </h3>
            <ul class="list-group list-group-flush small">
              <li class="list-group-item d-flex align-items-start gap-2 px-0"
                  ng-repeat="step in testResult.steps">
                <i class="fas mt-1"
                   ng-class="step.ok ? 'fa-circle-check text-success' : 'fa-circle-xmark text-danger'"></i>
                <div>
                  <strong ng-bind="step.step"></strong>
                  <div class="text-muted text-break" ng-bind="step.detail"></div>
                </div>
              </li>
            </ul>
            <div class="alert py-2 px-3 mt-2 mb-0"
                 ng-class="testResult.ok ? 'alert-success' : 'alert-danger'">
              <span ng-bind="testResult.message"></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- editor -------------------------------------------------------- -->
    <div class="col-xl-5">
      <div class="card h-100" ng-show="form" ng-cloak>
        <div class="card-body">
          <h2 class="h6 mb-3">
            <span ng-bind="form.destinationId ? 'Edit destination' : 'New destination'"></span>
          </h2>

          <form novalidate ng-submit="save()">
            <div class="mb-3">
              <label class="form-label" for="cpDName">Name</label>
              <input type="text" class="form-control" id="cpDName" ng-model="form.name"
                     maxlength="100" required>
            </div>

            <div class="mb-3">
              <label class="form-label" for="cpDType">Type</label>
              <select class="form-select" id="cpDType" ng-model="form.type">
                <option value="local">Local disk</option>
                <option value="sftp">SFTP</option>
                <option value="s3">S3-compatible (AWS, Wasabi, Spaces)</option>
                <option value="b2">Backblaze B2</option>
                <option value="gdrive" ng-if="gdrive.available">Google Drive</option>
              </select>
              <div class="form-text" ng-hide="gdrive.available" ng-cloak>
                Google Drive is not offered on this server: <span ng-bind="gdrive.reason"></span>
                <code class="d-block mt-1" ng-show="gdrive.command" ng-bind="gdrive.command"></code>
              </div>
            </div>

            <!-- local -->
            <div ng-show="form.type === 'local'">
              <div class="mb-3">
                <label class="form-label" for="cpDPath">Directory</label>
                <input type="text" class="form-control" id="cpDPath" ng-model="form.path"
                       placeholder="/home/backup">
                <div class="form-text">
                  A local destination protects against a bad deploy, not against
                  losing the server. Keep at least one remote destination too.
                </div>
              </div>
            </div>

            <!-- sftp -->
            <div ng-show="form.type === 'sftp'">
              <div class="row g-2 mb-3">
                <div class="col-8">
                  <label class="form-label" for="cpDHost">Host</label>
                  <input type="text" class="form-control" id="cpDHost" ng-model="form.host">
                </div>
                <div class="col-4">
                  <label class="form-label" for="cpDPort">Port</label>
                  <input type="number" class="form-control" id="cpDPort" ng-model="form.port"
                         min="1" max="65535">
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="cpDUser">User</label>
                <input type="text" class="form-control" id="cpDUser" ng-model="form.username"
                       autocomplete="off">
              </div>
              <div class="mb-3">
                <label class="form-label" for="cpDPass">
                  Password
                  <span class="badge text-bg-secondary ms-1" ng-show="form.hasPassword">stored</span>
                </label>
                <input type="password" class="form-control" id="cpDPass" ng-model="form.password"
                       autocomplete="new-password">
                <div class="form-text">
                  Stored encrypted and never sent back to the browser. Leave the
                  masked value untouched to keep the current password.
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="cpDKey">Private key file (optional)</label>
                <input type="text" class="form-control" id="cpDKey" ng-model="form.keyFile"
                       placeholder="/root/.ssh/id_ed25519">
                <div class="form-text">Used instead of the password when set.</div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="cpDRemote">Remote directory</label>
                <input type="text" class="form-control" id="cpDRemote" ng-model="form.path"
                       placeholder="/backup">
              </div>
            </div>

            <!-- object storage -->
            <div ng-show="form.type === 's3' || form.type === 'b2'">
              <div class="mb-3">
                <label class="form-label" for="cpDBucket">Bucket</label>
                <input type="text" class="form-control" id="cpDBucket" ng-model="form.bucket">
              </div>
              <div class="row g-2 mb-3">
                <div class="col-6">
                  <label class="form-label" for="cpDRegion">Region</label>
                  <input type="text" class="form-control" id="cpDRegion" ng-model="form.region"
                         placeholder="us-east-1">
                </div>
                <div class="col-6">
                  <label class="form-label" for="cpDPrefix">Key prefix</label>
                  <input type="text" class="form-control" id="cpDPrefix" ng-model="form.path"
                         placeholder="cloudpanel">
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="cpDEndpoint">Endpoint URL</label>
                <input type="text" class="form-control" id="cpDEndpoint" ng-model="form.endpoint"
                       ng-attr-placeholder="{$ endpointHint() $}">
                <div class="form-text">
                  Leave blank for AWS. Backblaze B2, Wasabi and DigitalOcean Spaces
                  each publish their own endpoint — B2's is filled in from the
                  region when left blank.
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="cpDAccess">Access key ID</label>
                <input type="text" class="form-control" id="cpDAccess" ng-model="form.accessKey"
                       autocomplete="off">
              </div>
              <div class="mb-3">
                <label class="form-label" for="cpDSecret">
                  Secret access key
                  <span class="badge text-bg-secondary ms-1" ng-show="form.hasSecretKey">stored</span>
                </label>
                <input type="password" class="form-control" id="cpDSecret"
                       ng-model="form.secretKey" autocomplete="new-password">
                <div class="form-text">
                  Stored encrypted and never sent back to the browser.
                </div>
              </div>
            </div>

            <!-- google drive -->
            <div ng-show="form.type === 'gdrive'">
              <div class="mb-3">
                <label class="form-label" for="cpDFolder">Drive folder ID</label>
                <input type="text" class="form-control" id="cpDFolder" ng-model="form.folderId"
                       autocomplete="off" placeholder="1AbCdEfGhIjKlMnOpQrStUvWxYz">
                <div class="form-text">
                  Open the destination folder in Drive; the ID is the part of the
                  URL after <code>/folders/</code>.
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="cpDSaJson">
                  Service-account key (JSON)
                  <span class="badge text-bg-secondary ms-1" ng-show="form.hasServiceAccountKey">stored</span>
                </label>
                <textarea class="form-control font-monospace" id="cpDSaJson" rows="5"
                          ng-model="form.serviceAccountJson" autocomplete="off"
                          spellcheck="false"></textarea>
                <div class="form-text">
                  Paste the whole JSON key Google generated for a
                  <strong>service account</strong> — not an OAuth client key, which
                  needs a human to click a consent screen. It is written to a
                  <code>0600</code> file outside every document root and is never
                  sent back to this page.
                </div>
              </div>
              <div class="alert alert-info py-2 px-3 small" ng-show="form.serviceAccountEmail" ng-cloak>
                Share the target folder with
                <code ng-bind="form.serviceAccountEmail"></code>
                (Editor, or Content manager on a Shared Drive). Until it is shared,
                Drive reports the folder as not existing.
              </div>
              <div class="alert alert-warning py-2 px-3 small">
                Use a <strong>Shared Drive</strong>. A service account has no Drive
                storage quota of its own, so uploading into a folder on someone's
                personal My Drive fails with <code>storageQuotaExceeded</code>.
              </div>
            </div>

            <div class="form-check form-switch mb-3">
              <input class="form-check-input" type="checkbox" id="cpDActive" ng-model="form.active">
              <label class="form-check-label" for="cpDActive">Available for backups</label>
            </div>

            <div class="d-flex gap-2">
              <button type="submit" class="btn btn-primary" ng-disabled="saving">
                <i class="fas fa-floppy-disk me-1"></i>
                <span ng-bind="saving ? 'Saving…' : 'Save destination'"></span>
              </button>
              <button type="button" class="btn btn-outline-secondary" ng-click="cancel()">
                Cancel
              </button>
            </div>
          </form>
        </div>
      </div>

      <div class="card h-100" ng-hide="form" ng-cloak>
        <div class="card-body d-flex align-items-center justify-content-center text-center">
          <div class="text-muted small">
            <i class="fas fa-hard-drive fa-2x d-block mb-2"></i>
            Select a destination to edit, or add a new one.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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