{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Pull websites in from another CloudPanel server. The source panel URL and
   API token are only ever sent to the destination's own AJAX endpoints over this
   session's own CSRF-protected POST; they are never rendered back once submitted. {% endcomment %}

{% block title %}Transfer from another server{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Transfer from another server</h1>
      <p class="text-muted mb-0 small">
        Pull websites in from another CloudPanel installation: this panel asks the
        source to back each site up, downloads the archive over HTTPS and restores
        it here.
      </p>
    </div>
    <a class="btn btn-outline-secondary btn-sm" href="/backup/remoteBackups">
      <i class="fas fa-box-archive me-1"></i> Remote Backups
    </a>
  </div>

  <div class="card mb-4">
    <div class="card-body">
      <h2 class="h6 mb-3">1. Connect to the source panel</h2>
      <form novalidate ng-submit="connect()">
        <div class="row g-3">
          <div class="col-md-5">
            <label class="form-label" for="cpSourceUrl">Source panel URL</label>
            <input type="text" class="form-control" id="cpSourceUrl" ng-model="connection.sourceUrl"
                   placeholder="https://old.example.com:8090" required>
          </div>
          <div class="col-md-4">
            <label class="form-label" for="cpSourceToken">Source admin API token</label>
            <input type="password" class="form-control" id="cpSourceToken"
                   ng-model="connection.sourceToken" autocomplete="off" required>
            <div class="form-text">
              An administrator's own API token on the source panel (User Management
              &rarr; API). Never stored anywhere except this migration's own record
              of it, encrypted at rest.
            </div>
          </div>
          <div class="col-md-3">
            <label class="form-label" for="cpFingerprint">
              Certificate fingerprint <span class="text-muted">(optional)</span>
            </label>
            <input type="text" class="form-control" id="cpFingerprint" ng-model="connection.fingerprint"
                   placeholder="SHA-256, for a self-signed source">
          </div>
        </div>
        <button type="submit" class="btn btn-primary mt-3"
                ng-disabled="connecting || !connection.sourceUrl || !connection.sourceToken">
          <i class="fas fa-plug me-1"></i>
          <span ng-bind="connecting ? 'Connecting…' : 'List websites'"></span>
        </button>
      </form>

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

  <div class="card mb-4" ng-show="sites.length" ng-cloak>
    <div class="card-body">
      <h2 class="h6 mb-3">2. Choose sites and where they land here</h2>

      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
          <thead>
            <tr>
              <th scope="col"><input type="checkbox" ng-model="allSelected" ng-change="toggleAll()"></th>
              <th scope="col">Source domain</th>
              <th scope="col">Restore as</th>
              <th scope="col">Local owner</th>
              <th scope="col" ng-show="isAdmin">Package</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="site in sites">
              <td><input type="checkbox" ng-model="site.selected"></td>
              <td class="text-break">
                <code ng-bind="site.domain"></code>
                <div class="text-muted small" ng-bind="site.owner"></div>
              </td>
              <td>
                <input type="text" class="form-control form-control-sm" ng-model="site.renameDomain"
                       placeholder="{$ site.domain $}">
              </td>
              <td>
                <select class="form-select form-select-sm" ng-model="site.owner_choice"
                        ng-options="u for u in localUsers">
                  <option value="">Me ({$ userName $})</option>
                </select>
              </td>
              <td ng-show="isAdmin">
                <input type="text" class="form-control form-control-sm" ng-model="site.package"
                       placeholder="Migrated">
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <button class="btn btn-primary mt-3" ng-click="start()"
              ng-disabled="starting || !anySelected()">
        <i class="fas fa-cloud-arrow-down me-1"></i>
        <span ng-bind="starting ? 'Starting…' : 'Start transfer'"></span>
      </button>

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

  <div class="card">
    <div class="card-body">
      <div class="d-flex align-items-center justify-content-between mb-3">
        <h2 class="h6 mb-0">3. Progress</h2>
        <button class="btn btn-outline-secondary btn-sm" ng-click="refreshJobs()">
          <i class="fas fa-rotate me-1"></i> Refresh
        </button>
      </div>

      <p class="text-muted small mb-0" ng-show="!jobs.length" ng-cloak>
        No transfers started yet.
      </p>

      <div class="table-responsive" ng-show="jobs.length" ng-cloak>
        <table class="table table-sm align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">Site</th>
              <th scope="col">Stage</th>
              <th scope="col">Progress</th>
              <th scope="col">Message</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="job in jobs">
              <td class="text-break">
                <code ng-bind="job.sourceDomain"></code>
                <span ng-show="job.renaming"> &rarr; <code ng-bind="job.targetDomain"></code></span>
              </td>
              <td>
                <span class="badge"
                      ng-class="{'text-bg-success': job.stage === 'completed',
                                 'text-bg-danger': job.stage === 'failed',
                                 'text-bg-secondary': job.stage !== 'completed' && job.stage !== 'failed'}"
                      ng-bind="job.stageLabel"></span>
              </td>
              <td style="min-width: 140px;">
                <div class="progress" style="height: 6px;">
                  <div class="progress-bar"
                       ng-class="{'bg-danger': job.stage === 'failed',
                                  'progress-bar-striped progress-bar-animated': !job.finished}"
                       ng-style="{width: (job.percentage || 0) + '%'}"></div>
                </div>
              </td>
              <td class="small text-muted text-break" ng-bind="job.message"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ transferBootstrap|json_script:"cp-transfer-bootstrap" }}
<script src="{% static 'backupManager/backupManager.js' %}"></script>
{% endblock %}