{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
The install screen.

Picking an application and a site triggers /apps/appDetail, which runs the same
preflight the server enforces in startInstall — so what is shown here and what
is allowed cannot drift apart. The progress bar polls /apps/installStatus with
cpPoll.
{% endcomment %}

{% block title %}Install an application{% endblock %}

{% block styles %}
<style>
  .cpa-panel {
    background: var(--cp-bg); border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow); padding: 1.25rem;
  }
  .cpa-check { border-left: 3px solid var(--cp-border); padding-left: .75rem; }
  .cpa-check--ok { border-left-color: var(--cp-primary); }
  .cpa-check--bad { border-left-color: var(--cp-danger); }
  .cpa-icon {
    align-items: center; background: var(--cp-primary-soft); border-radius: var(--cp-radius);
    color: var(--cp-primary); display: inline-flex; font-size: 1.35rem;
    height: 2.75rem; justify-content: center; width: 2.75rem;
  }
  .cpa-cred {
    background: var(--cp-bg-subtle); border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius); font-family: var(--cp-font-mono);
    font-size: .82rem; padding: .75rem 1rem; word-break: break-all;
  }
  .cpa-muted { color: var(--cp-neutral); opacity: .75; }
</style>
{% endblock %}

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

  {{ catalogue|json_script:"cpAppsCatalogue" }}
  {{ websites|json_script:"cpAppsWebsites" }}
  {{ selectedApp|json_script:"cpAppsSelectedApp" }}
  {{ selectedDomain|json_script:"cpAppsSelectedDomain" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Install an application</h1>
      <p class="mb-0 small cpa-muted">
        Choose the application and the website. CloudPanel checks the server
        before it downloads anything.
      </p>
    </div>
    <a href="/apps/" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-arrow-left me-1"></i>Back to the catalogue
    </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>
    <a class="alert-link ms-1" ng-show="delegateUrl" ng-href="{$ delegateUrl $}">Open it →</a>
  </div>

  <div class="row g-3" ng-cloak>
    <!-- ---------------------------------------------------------------- -->
    <div class="col-lg-6">
      <div class="cpa-panel">
        <h2 class="h6 mb-3">1 &middot; What to install</h2>

        <label class="form-label small" for="cpaApp">Application</label>
        <select id="cpaApp" class="form-select mb-3" ng-model="form.slug"
                ng-change="applicationChanged()"
                ng-options="app.slug as app.name + ' ' + app.version for app in applications">
          <option value="">Choose an application…</option>
        </select>

        <div class="d-flex align-items-center gap-3 mb-3" ng-show="selected">
          <span class="cpa-icon"><i ng-class="selected.icon"></i></span>
          <div>
            <div class="fw-semibold" ng-bind="selected.name"></div>
            <div class="small cpa-muted" ng-bind="selected.vendor + ' · ' + selected.licence"></div>
          </div>
        </div>
        <p class="small cpa-muted" ng-show="selected" ng-bind="selected.description"></p>

        <label class="form-label small" for="cpaDomain">Website</label>
        <select id="cpaDomain" class="form-select mb-3" ng-model="form.domain"
                ng-change="refreshPreflight()"
                ng-options="domain as domain for domain in websites">
          <option value="">Choose a website…</option>
        </select>

        <label class="form-label small" for="cpaDirectory">
          Subdirectory <span class="cpa-muted">(leave empty to install into the document root)</span>
        </label>
        <div class="input-group mb-3">
          <span class="input-group-text" ng-bind="(form.domain || 'example.com') + '/'"></span>
          <input id="cpaDirectory" class="form-control" type="text" ng-model="form.directory"
                 ng-change="refreshPreflightDebounced()" placeholder="blog" maxlength="128">
        </div>

        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" id="cpaOverwrite"
                 ng-model="form.overwrite" ng-change="refreshPreflight()">
          <label class="form-check-label small" for="cpaOverwrite">
            Install anyway if the directory already has files in it
          </label>
        </div>

        <button type="button" class="btn btn-primary w-100"
                ng-disabled="busy || running || !form.slug || !form.domain || (preflight && !preflight.ok)"
                ng-click="start()">
          <i class="fas fa-download me-1"></i>
          <span ng-bind="running ? 'Installing…' : 'Install now'"></span>
        </button>
      </div>
    </div>

    <!-- ---------------------------------------------------------------- -->
    <div class="col-lg-6">
      <div class="cpa-panel">
        <h2 class="h6 mb-3">2 &middot; Preflight</h2>

        <p class="small cpa-muted" ng-show="!preflight && !checking">
          Pick an application and a website and CloudPanel will check this server
          against the application's requirements.
        </p>
        <p class="small cpa-muted" ng-show="checking">
          <i class="fas fa-circle-notch fa-spin me-1"></i>Checking the server…
        </p>

        <div ng-show="preflight">
          <div class="alert py-2 px-3 small"
               ng-class="preflight.ok ? 'alert-success' : 'alert-danger'">
            <i class="fas me-1" ng-class="preflight.ok ? 'fa-circle-check' : 'fa-circle-xmark'"></i>
            <span ng-bind="preflight.ok ? 'This server meets the requirements.' : 'This install cannot start yet.'"></span>
          </div>

          <ul class="list-unstyled small mb-3" ng-show="preflight.problems.length">
            <li class="cpa-check cpa-check--bad mb-2" ng-repeat="problem in preflight.problems"
                ng-bind="problem"></li>
          </ul>

          <ul class="list-unstyled small mb-3" ng-show="preflight.warnings.length">
            <li class="cpa-check mb-2" ng-repeat="warning in preflight.warnings track by $index">
              <i class="fas fa-circle-info me-1"></i><span ng-bind="warning"></span>
            </li>
          </ul>

          <dl class="row small mb-0">
            <dt class="col-5 fw-normal cpa-muted">Install path</dt>
            <dd class="col-7 text-break" ng-bind="installPath"></dd>

            <dt class="col-5 fw-normal cpa-muted">PHP</dt>
            <dd class="col-7">
              <span ng-bind="preflight.php.selected || 'unknown'"></span>
              <span class="cpa-muted" ng-bind="' (needs ' + preflight.php.required + '+)'"></span>
            </dd>

            <dt class="col-5 fw-normal cpa-muted">Free disk under /home</dt>
            <dd class="col-7">
              <span ng-bind="preflight.disk.freeHuman || 'unknown'"></span>
              <span class="cpa-muted" ng-bind="' (needs ~' + preflight.disk.neededMb + ' MB)'"></span>
            </dd>

            <dt class="col-5 fw-normal cpa-muted" ng-show="preflight.memory.neededMb">Memory</dt>
            <dd class="col-7" ng-show="preflight.memory.neededMb">
              <span ng-bind="preflight.memory.totalHuman || 'unknown'"></span>
              <span class="cpa-muted" ng-bind="' (needs ' + preflight.memory.neededMb + ' MB)'"></span>
            </dd>

            <dt class="col-5 fw-normal cpa-muted" ng-show="preflight.services.length">Services</dt>
            <dd class="col-7" ng-show="preflight.services.length">
              <span ng-repeat="svc in preflight.services">
                <span ng-bind="svc.name"></span>
                <span ng-bind="svc.running ? ' (running)' : ' (not running)'"></span><span ng-show="!$last">, </span>
              </span>
            </dd>

            <dt class="col-5 fw-normal cpa-muted" ng-show="preflight.databaseQuota.limit">Databases</dt>
            <dd class="col-7" ng-show="preflight.databaseQuota.limit"
                ng-bind="preflight.databaseQuota.used + ' of ' + preflight.databaseQuota.limit + ' used'"></dd>
          </dl>
        </div>
      </div>

      <!-- progress ---------------------------------------------------- -->
      <div class="cpa-panel mt-3" ng-show="running || finished">
        <h2 class="h6 mb-3">3 &middot; Progress</h2>
        <div class="progress mb-2" role="progressbar" aria-label="Installation progress"
             aria-valuemin="0" aria-valuemax="100" aria-valuenow="{$ progress $}">
          <div class="progress-bar" ng-class="{'bg-danger': failed, 'progress-bar-animated progress-bar-striped': running}"
               ng-style="{width: progress + '%'}"></div>
        </div>
        <p class="small mb-3" ng-bind="statusMessage"></p>

        <div ng-show="credentials.dbName">
          <p class="small fw-semibold mb-1">
            Database credentials — copy them now, CloudPanel does not store the password.
          </p>
          <div class="cpa-cred mb-3">
            <div>database: <span ng-bind="credentials.dbName"></span></div>
            <div>user: <span ng-bind="credentials.dbUser"></span></div>
            <div>password: <span ng-bind="credentials.dbPassword"></span></div>
            <div>host: <span ng-bind="credentials.dbHost"></span></div>
          </div>
        </div>

        <div class="d-flex gap-2" ng-show="finished && !failed">
          <a class="btn btn-primary btn-sm" ng-href="{$ adminUrl $}"
             target="_blank" rel="noopener noreferrer">
            <i class="fas fa-up-right-from-square me-1"></i>Finish the setup
          </a>
          <a class="btn btn-outline-secondary btn-sm" ng-href="/apps/detail/{$ installID $}">
            Installation details
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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