{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Staging, push-to-production and full-site cloning. All three are long
   operations driven through cpPoll. The push panel is deliberately the loudest
   thing on the page: it replaces a live database and there is no undo. {% endcomment %}

{% block title %}Staging and cloning{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Staging and cloning</h1>
      <p class="text-muted mb-0 small">
        Make a working copy of a site at its own subdomain, or clone it onto a
        brand new domain.
      </p>
    </div>
    <a href="/websites/listWebsites" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-globe me-1"></i>Websites
    </a>
  </div>

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

  <ul class="nav nav-tabs mb-4" role="tablist">
    <li class="nav-item" role="presentation">
      <button type="button" class="nav-link" ng-class="{active: tab === 'staging'}"
              ng-click="tab = 'staging'">
        <i class="fas fa-flask me-1"></i>Staging sites
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button type="button" class="nav-link" ng-class="{active: tab === 'clone'}"
              ng-click="tab = 'clone'">
        <i class="fas fa-clone me-1"></i>Clone a website
      </button>
    </li>
  </ul>

  <!-- ------------------------------------------------------------ staging -->
  <div ng-show="tab === 'staging'" ng-cloak>
    <div class="card mb-4">
      <div class="card-body">
        <h2 class="h6 mb-3">
          <i class="fas fa-flask me-1 text-primary"></i>Create a staging copy
        </h2>
        <form novalidate ng-submit="createStaging()">
          <div class="row g-3 align-items-end">
            <div class="col-md-4">
              <label class="form-label" for="cpStageSource">Production website</label>
              <select class="form-select" id="cpStageSource" ng-model="stage.domain"
                      ng-change="suggestStagingDomain(); loadStaging()"
                      ng-disabled="running" required>
                <option value="">Choose a website…</option>
                {% for site in websites %}
                  <option value="{{ site }}">{{ site }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="cpStageDomain">Staging domain</label>
              <input type="text" class="form-control" id="cpStageDomain"
                     ng-model="stage.stagingDomain" ng-disabled="running"
                     placeholder="staging.example.com">
            </div>
            <div class="col-md-2">
              <label class="form-label" for="cpStagePhp">PHP</label>
              <select class="form-select" id="cpStagePhp" ng-model="stage.phpSelection"
                      ng-disabled="running">
                <option value="">Same as production</option>
                {% for version in phpVersions %}
                  <option value="{{ version }}">{{ version }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-2">
              <div class="form-check form-switch mb-2">
                <input class="form-check-input" type="checkbox" id="cpStageSsl"
                       ng-model="stage.ssl" ng-disabled="running">
                <label class="form-check-label" for="cpStageSsl">Issue a certificate</label>
              </div>
              <button type="submit" class="btn btn-primary w-100" ng-disabled="running">
                <span class="spinner-border spinner-border-sm me-1" ng-show="running"
                      role="status" aria-hidden="true"></span>
                Create
              </button>
            </div>
          </div>
          <div class="form-text mt-2">
            The document root is copied, the database is cloned under a new name
            with its own user, and for WordPress the site URL is rewritten with
            <code>wp search-replace</code>. The copy is also marked as
            "discourage search engines".
          </div>
        </form>
      </div>
    </div>

    <div class="card mb-4" ng-show="started">
      <div class="card-body">
        <h2 class="h6 mb-3"><i class="fas fa-gears me-1 text-primary"></i>
          <span ng-bind="jobLabel"></span>
        </h2>
        <div class="progress" role="progressbar" aria-label="Job progress"
             style="height: 1.25rem;">
          <div class="progress-bar progress-bar-striped"
               ng-class="{'progress-bar-animated': running,
                          'bg-danger': failed, 'bg-success': done && !failed}"
               ng-style="{width: progress + '%'}">
            <span ng-bind="progress + '%'"></span>
          </div>
        </div>
        <p class="mt-3 mb-0 small" ng-class="failed ? 'text-danger' : 'text-muted'"
           ng-bind="statusText"></p>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h2 class="h6 mb-0">
            <i class="fas fa-list me-1 text-primary"></i>Staging sites
          </h2>
          <button type="button" class="btn btn-sm btn-outline-secondary"
                  ng-click="loadStaging()" ng-disabled="busy">
            <i class="fas fa-rotate me-1"></i>Refresh
          </button>
        </div>

        <p class="text-muted small mb-0" ng-show="!busy && stagingSites.length === 0">
          No staging sites yet.
        </p>

        <div class="border rounded p-3 mb-3" ng-repeat="row in stagingSites">
          <div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
            <div>
              <div class="fw-semibold">
                <a ng-href="https://{$ row.stagingDomain $}" target="_blank"
                   rel="noopener" class="text-decoration-none"
                   ng-bind="row.stagingDomain"></a>
                <span class="badge rounded-pill ms-1"
                      ng-class="{'text-bg-success': row.state === 'ready',
                                 'text-bg-info': row.state === 'creating' || row.state === 'pushing',
                                 'text-bg-danger': row.state === 'failed'}"
                      ng-bind="row.state"></span>
              </div>
              <div class="small text-muted">
                copy of <code ng-bind="row.master"></code>
                <span ng-show="row.isWordPress"> · WordPress · database
                  <code ng-bind="row.dbName"></code></span>
              </div>
              <div class="small text-muted" ng-show="row.message" ng-bind="row.message"></div>
              <div class="small text-muted" ng-show="row.lastPush">
                last pushed to production <span ng-bind="row.lastPush"></span>
              </div>
            </div>
            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-danger"
                      ng-click="openPush(row)"
                      ng-disabled="running || row.state !== 'ready'">
                <i class="fas fa-arrow-up-from-bracket me-1"></i>Push to production
              </button>
              <button type="button" class="btn btn-outline-danger"
                      ng-click="removeStaging(row)" ng-disabled="running">
                <i class="fas fa-trash me-1"></i>Delete
              </button>
            </div>
          </div>

          <!-- push confirmation -->
          <div class="alert alert-danger mt-3 mb-0" ng-show="pushFor === row.id">
            <h3 class="h6">
              <i class="fas fa-triangle-exclamation me-1"></i>
              This replaces the live site <span ng-bind="row.master"></span>
            </h3>
            <ul class="small mb-3">
              <li>The production document root is overwritten with the staging
                copy. <code>wp-config.php</code> is kept so production keeps its
                own database credentials.</li>
              <li ng-show="row.isWordPress">
                <strong>The production database is replaced</strong> by the
                staging database. Anything written on the live site since the
                copy was made — orders, comments, new posts — is gone.</li>
              <li>A full backup of production is taken first. If that backup
                fails, the push is refused and nothing is changed.</li>
            </ul>
            <label class="form-label small" for="cpPushConfirm">
              Type <code ng-bind="row.master"></code> to confirm
            </label>
            <div class="input-group input-group-sm">
              <input type="text" class="form-control" id="cpPushConfirm"
                     ng-model="pushConfirm" autocomplete="off"
                     placeholder="{$ row.master $}">
              <button class="btn btn-danger" type="button" ng-click="push(row)"
                      ng-disabled="running || pushConfirm !== row.master">
                Replace production
              </button>
              <button class="btn btn-outline-secondary" type="button"
                      ng-click="pushFor = 0; pushConfirm = ''">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- -------------------------------------------------------------- clone -->
  <div ng-show="tab === 'clone'" ng-cloak>
    <div class="card">
      <div class="card-body">
        <h2 class="h6 mb-3">
          <i class="fas fa-clone me-1 text-primary"></i>Clone a website
        </h2>
        <form novalidate ng-submit="cloneWebsite()">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="cpCloneSource">Source website</label>
              <select class="form-select" id="cpCloneSource" ng-model="clone.domain"
                      ng-disabled="running" required>
                <option value="">Choose a website…</option>
                {% for site in websites %}
                  <option value="{{ site }}">{{ site }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="cpCloneTarget">New domain</label>
              <input type="text" class="form-control" id="cpCloneTarget"
                     ng-model="clone.newDomain" ng-disabled="running"
                     placeholder="newsite.com" required>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="cpClonePackage">Package</label>
              <select class="form-select" id="cpClonePackage" ng-model="clone.package"
                      ng-disabled="running">
                <option value="">Same as the source</option>
                {% for package in packages %}
                  <option value="{{ package.packageName }}">{{ package.packageName }}</option>
                {% endfor %}
              </select>
              <div class="form-text">
                The new domain counts against the owner's package quota.
              </div>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="cpClonePhp">PHP</label>
              <select class="form-select" id="cpClonePhp" ng-model="clone.phpSelection"
                      ng-disabled="running">
                <option value="">Same as the source</option>
                {% for version in phpVersions %}
                  <option value="{{ version }}">{{ version }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="cpCloneEmail">Administrator email</label>
              <input type="email" class="form-control" id="cpCloneEmail"
                     ng-model="clone.adminEmail" ng-disabled="running"
                     placeholder="{{ defaultEmail }}">
            </div>
            <div class="col-md-4">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="cpCloneSsl"
                       ng-model="clone.ssl" ng-disabled="running">
                <label class="form-check-label" for="cpCloneSsl">
                  Issue a certificate for the new domain
                </label>
              </div>
            </div>
          </div>
          <div class="mt-3">
            <button type="submit" class="btn btn-primary" ng-disabled="running">
              <span class="spinner-border spinner-border-sm me-1" ng-show="running"
                    role="status" aria-hidden="true"></span>
              Clone the website
            </button>
          </div>
        </form>

        <div class="mt-4" ng-show="started && jobLabel === 'Cloning'">
          <div class="progress" role="progressbar" aria-label="Clone progress"
               style="height: 1.25rem;">
            <div class="progress-bar progress-bar-striped"
                 ng-class="{'progress-bar-animated': running,
                            'bg-danger': failed, 'bg-success': done && !failed}"
                 ng-style="{width: progress + '%'}">
              <span ng-bind="progress + '%'"></span>
            </div>
          </div>
          <p class="mt-3 mb-0 small" ng-class="failed ? 'text-danger' : 'text-muted'"
             ng-bind="statusText"></p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_STAGING_DEFAULTS = { email: "{{ defaultEmail|escapejs }}" };
</script>
<script src="{% static 'websiteFunctions/websiteFunctions.js' %}"></script>
{% endblock %}