{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Git deployment console. The deploy itself runs in a background worker and
   reports through a status file, so this page uses the same cpPoll contract as
   website creation. The webhook secret is fetched by an explicit POST and is
   never part of the listing response. {% endcomment %}

{% block title %}Git deployment{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Git deployment</h1>
      <p class="text-muted mb-0 small">
        Deploy straight from a repository into a site's document root. Every
        command runs as the site's own system user, never as root.
      </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>

  <div class="card mb-4">
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-md-6">
          <label class="form-label" for="cpGitDomain">Website or child domain</label>
          <select class="form-select" id="cpGitDomain" ng-model="domain"
                  ng-change="loadConfigs()">
            <option value="">Choose a domain…</option>
            {% for site in websites %}
              <option value="{{ site }}">{{ site }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-6 text-md-end">
          <button type="button" class="btn btn-outline-secondary btn-sm"
                  ng-click="loadConfigs()" ng-disabled="!domain || busy">
            <i class="fas fa-rotate me-1"></i>Refresh
          </button>
          <button type="button" class="btn btn-primary btn-sm"
                  ng-click="showAttach = !showAttach" ng-disabled="!domain">
            <i class="fas fa-code-branch me-1"></i>Attach a repository
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- attach -->
  <div class="card mb-4" ng-show="showAttach && domain" ng-cloak>
    <div class="card-body">
      <h2 class="h6 mb-3"><i class="fas fa-plug me-1 text-primary"></i>Attach a repository</h2>
      <form novalidate ng-submit="attach()">
        <div class="row g-3">
          <div class="col-md-8">
            <label class="form-label" for="cpRepoUrl">Repository URL</label>
            <input type="text" class="form-control font-monospace" id="cpRepoUrl"
                   ng-model="form.repoUrl" ng-disabled="running"
                   placeholder="git@github.com:owner/repo.git" required>
            <div class="form-text">
              A URL containing a username and token is refused: use an ssh deploy
              key instead, so the credential never lives in the panel database.
            </div>
          </div>
          <div class="col-md-4">
            <label class="form-label" for="cpRepoBranch">Branch</label>
            <input type="text" class="form-control" id="cpRepoBranch"
                   ng-model="form.branch" ng-disabled="running" placeholder="main">
          </div>
          <div class="col-md-8">
            <label class="form-label" for="cpRepoPath">Deployment directory</label>
            <input type="text" class="form-control font-monospace" id="cpRepoPath"
                   ng-model="form.deployPath" ng-disabled="running"
                   placeholder="{$ defaultPath $}">
            <div class="form-text">
              Relative names are resolved under the document root. The path must
              stay inside <code ng-bind="homePath"></code>.
            </div>
          </div>
          <div class="col-md-4">
            <label class="form-label" for="cpRepoProvider">Provider</label>
            <select class="form-select" id="cpRepoProvider" ng-model="form.provider"
                    ng-disabled="running">
              <option value="github">GitHub</option>
              <option value="gitlab">GitLab</option>
              <option value="generic">Other / generic</option>
            </select>
          </div>
          <div class="col-md-6">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="cpRepoAuto"
                     ng-model="form.autoDeploy" ng-disabled="running">
              <label class="form-check-label" for="cpRepoAuto">
                Deploy automatically when the webhook fires
              </label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="cpRepoKey"
                     ng-model="form.generateKey" ng-disabled="running">
              <label class="form-check-label" for="cpRepoKey">
                Generate an ssh deploy key for this checkout
              </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>
            Attach and deploy
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- progress -->
  <div class="card mb-4" ng-show="started" ng-cloak>
    <div class="card-body">
      <h2 class="h6 mb-3"><i class="fas fa-gears me-1 text-primary"></i>Deployment</h2>
      <div class="progress" role="progressbar" aria-label="Deployment 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>

  <!-- configured repositories -->
  <div class="card mb-4" ng-show="domain" ng-cloak>
    <div class="card-body">
      <h2 class="h6 mb-3">
        <i class="fas fa-code-branch me-1 text-primary"></i>Attached repositories
      </h2>

      <p class="text-muted small mb-0" ng-show="!busy && configs.length === 0">
        No repository is attached to this site yet.
      </p>

      <div class="border rounded p-3 mb-3" ng-repeat="config in configs">
        <div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
          <div>
            <div class="fw-semibold font-monospace" ng-bind="config.repoUrl"></div>
            <div class="small text-muted">
              branch <span class="badge rounded-pill text-bg-secondary"
                           ng-bind="config.branch"></span>
              into <code ng-bind="config.deployPath"></code>
            </div>
            <div class="small mt-1">
              <span class="badge rounded-pill"
                    ng-class="{'text-bg-success': config.lastStatus === 'ok',
                               'text-bg-danger': config.lastStatus === 'failed',
                               'text-bg-info': config.lastStatus === 'running',
                               'text-bg-secondary': config.lastStatus === 'never'}"
                    ng-bind="config.lastStatus"></span>
              <span class="text-muted ms-1" ng-show="config.lastDeploy">
                last deployed <span ng-bind="config.lastDeploy"></span>
              </span>
              <span class="text-muted ms-1 font-monospace"
                    ng-show="config.lastCommit"
                    ng-bind="config.lastCommit.substring(0, 8)"></span>
            </div>
          </div>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary"
                    ng-click="pull(config)" ng-disabled="running">
              <i class="fas fa-download me-1"></i>Deploy now
            </button>
            <button type="button" class="btn btn-outline-secondary"
                    ng-click="showKey(config)">
              <i class="fas fa-key me-1"></i>Deploy key
            </button>
            <button type="button" class="btn btn-outline-secondary"
                    ng-click="loadWebhook(config, false)">
              <i class="fas fa-satellite-dish me-1"></i>Webhook
            </button>
            <button type="button" class="btn btn-outline-danger"
                    ng-click="detach(config)">
              <i class="fas fa-link-slash me-1"></i>Detach
            </button>
          </div>
        </div>

        <div class="alert alert-warning py-2 px-3 mt-3 mb-0 small"
             ng-show="!config.autoDeploy">
          <i class="fas fa-circle-info me-1"></i>
          Automatic deployment is off. The webhook still verifies its signature,
          and then does nothing.
        </div>

        <!-- deploy key -->
        <div class="mt-3" ng-show="keyFor === config.id">
          <label class="form-label small mb-1">Public deploy key</label>
          <textarea class="form-control font-monospace small" rows="3" readonly
                    aria-label="Public deploy key"
                    ng-bind="config.publicKey || 'No key has been generated for this checkout.'"></textarea>
          <div class="d-flex justify-content-between align-items-center mt-2">
            <span class="small text-muted">
              Add this as a read-only deploy key on the repository. The private
              half lives only in the site user's <code>~/.ssh</code>, mode 0600,
              and is never displayed here.
            </span>
            <button type="button" class="btn btn-sm btn-outline-secondary"
                    ng-click="regenerateKey(config)" ng-disabled="running">
              <i class="fas fa-rotate me-1"></i>Generate a new key
            </button>
          </div>
        </div>

        <!-- webhook -->
        <div class="mt-3" ng-show="webhookFor === config.id">
          <label class="form-label small mb-1">Payload URL</label>
          <input type="text" class="form-control font-monospace small" readonly
                 aria-label="Webhook payload URL"
                 ng-value="webhook.webhookAbsoluteUrl">
          <label class="form-label small mb-1 mt-2">
            Secret (header <code ng-bind="webhook.signatureHeader"></code>)
          </label>
          <div class="input-group">
            <input class="form-control font-monospace small"
                   type="{$ revealSecret ? 'text' : 'password' $}" readonly
                   aria-label="Webhook signing secret"
                   ng-value="webhook.webhookSecret">
            <button class="btn btn-outline-secondary" type="button"
                    ng-click="revealSecret = !revealSecret"
                    ng-attr-aria-label="{$ revealSecret ? 'Hide the webhook secret' : 'Show the webhook secret' $}"
                    ng-attr-aria-pressed="{$ revealSecret ? 'true' : 'false' $}">
              <i class="fas" ng-class="revealSecret ? 'fa-eye-slash' : 'fa-eye'"
                 aria-hidden="true"></i>
            </button>
            <button class="btn btn-outline-danger" type="button"
                    ng-click="loadWebhook(config, true)">
              <i class="fas fa-rotate me-1"></i>Rotate
            </button>
          </div>
          <div class="alert alert-secondary py-2 px-3 mt-2 mb-0 small">
            This endpoint is public, so the secret is what authorises a deploy.
            CloudPanel verifies the signature with a constant-time comparison,
            rate-limits each token, and refuses any call that arrives without a
            signature. Rotating the secret also issues a new payload URL.
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- history -->
  <div class="card" ng-show="domain" ng-cloak>
    <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-clock-rotate-left me-1 text-primary"></i>Deployment history
        </h2>
        <button type="button" class="btn btn-sm btn-outline-secondary"
                ng-click="loadLogs()" ng-disabled="busy">
          <i class="fas fa-rotate me-1"></i>Refresh
        </button>
      </div>

      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">When</th>
              <th scope="col">Action</th>
              <th scope="col">Commit</th>
              <th scope="col">Author</th>
              <th scope="col">Result</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="entry in logs">
              <td class="small text-muted" ng-bind="entry.date"></td>
              <td class="small" ng-bind="entry.action || '—'"></td>
              <td class="font-monospace small"
                  ng-bind="entry.commit ? entry.commit.substring(0, 8) : '—'"></td>
              <td class="small" ng-bind="entry.author || '—'"></td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="entry.status === 'ok' ? 'text-bg-success' : 'text-bg-danger'"
                      ng-bind="entry.status"></span>
                <div class="small text-muted text-truncate" style="max-width: 32rem;"
                     ng-bind="entry.output"></div>
              </td>
            </tr>
            <tr ng-show="!busy && logs.length === 0">
              <td colspan="5" class="text-center text-muted py-4">
                Nothing has been deployed for this site yet.
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'websiteFunctions/websiteFunctions.js' %}"></script>
{% endblock %}