{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
One installation: where it is, what it needs next, and the install log.

The row and its log are rendered from the server context (already scoped to the
caller in views.detail); the page only talks to /apps/installStatus while a job
is running, and to /apps/uninstallApp behind a typed confirmation.
{% endcomment %}

{% block title %}{{ install.name }} on {{ install.domain }}{% 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-muted { color: var(--cp-neutral); opacity: .75; }
  .cpa-mono { font-family: var(--cp-font-mono); font-size: .82rem; word-break: break-all; }
  .cpa-log {
    background: var(--cp-bg-subtle); border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius); font-family: var(--cp-font-mono);
    font-size: .78rem; max-height: 22rem; overflow-y: auto; padding: .75rem 1rem;
  }
  .cpa-log div + div { margin-top: .2rem; }
  .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;
  }
</style>
{% endblock %}

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

  {{ install|json_script:"cpAppsInstall" }}
  {{ application|json_script:"cpAppsApplication" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div class="d-flex align-items-center gap-3">
      <span class="cpa-icon"><i class="{{ install.icon }}"></i></span>
      <div>
        <h1 class="h4 mb-1">{{ install.name }}</h1>
        <p class="mb-0 small cpa-muted">{{ install.domain }}{% if install.directory %}/{{ install.directory }}{% endif %}</p>
      </div>
    </div>
    <div class="d-flex gap-2">
      <a href="/apps/installed" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-arrow-left me-1"></i>All installations
      </a>
      {% if install.adminUrl %}
      <a href="{{ install.adminUrl }}" class="btn btn-primary btn-sm"
         target="_blank" rel="noopener noreferrer">
        <i class="fas fa-up-right-from-square me-1"></i>Open
      </a>
      {% endif %}
    </div>
  </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>

  {% if install.needsComposer %}
  <div class="alert alert-warning py-2 px-3 small">
    <i class="fas fa-circle-info me-1"></i>
    This application ships without its PHP dependencies. Run
    <span class="cpa-mono">composer install</span> in
    <span class="cpa-mono">{{ install.path }}</span> over SSH before it will respond.
  </div>
  {% endif %}

  <div class="row g-3">
    <div class="col-lg-5">
      <div class="cpa-panel">
        <h2 class="h6 mb-3">Where it lives</h2>
        <dl class="row small mb-0">
          <dt class="col-5 fw-normal cpa-muted">Status</dt>
          <dd class="col-7">{{ install.status }}</dd>

          <dt class="col-5 fw-normal cpa-muted">Version</dt>
          <dd class="col-7">{{ install.version|default:"—" }}</dd>

          <dt class="col-5 fw-normal cpa-muted">Installed</dt>
          <dd class="col-7">{{ install.installedAt }}</dd>

          <dt class="col-5 fw-normal cpa-muted">Path</dt>
          <dd class="col-7 cpa-mono">{{ install.path }}</dd>

          <dt class="col-5 fw-normal cpa-muted">Site URL</dt>
          <dd class="col-7 cpa-mono">{{ install.siteUrl }}</dd>

          <dt class="col-5 fw-normal cpa-muted">Database</dt>
          <dd class="col-7 cpa-mono">{{ install.dbName|default:"—" }}</dd>

          <dt class="col-5 fw-normal cpa-muted">Database user</dt>
          <dd class="col-7 cpa-mono">{{ install.dbUser|default:"—" }}</dd>
        </dl>
        <p class="small cpa-muted mt-3 mb-0">
          CloudPanel never stores the database password: it was shown once during
          the install and written into the application's own configuration file.
        </p>
        {% if install.docsUrl %}
        <a class="btn btn-outline-secondary btn-sm mt-3" href="{{ install.docsUrl }}"
           target="_blank" rel="noopener noreferrer">
          <i class="fas fa-book me-1"></i>Vendor documentation
        </a>
        {% endif %}
      </div>

      <!-- uninstall ------------------------------------------------------ -->
      <div class="cpa-panel mt-3">
        <h2 class="h6 mb-2 text-danger">
          <i class="fas fa-triangle-exclamation me-1"></i>Uninstall
        </h2>
        <p class="small mb-2">
          Deletes <span class="cpa-mono">{{ install.path }}</span> and everything under
          it. There is no undo.
        </p>

        {% if install.dbName %}
        <div class="form-check mb-2">
          <input class="form-check-input" type="checkbox" id="cpaDropDb" ng-model="dropDatabase">
          <label class="form-check-label small" for="cpaDropDb">
            Also drop the database <span class="cpa-mono">{{ install.dbName }}</span>
          </label>
        </div>
        {% endif %}
        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" id="cpaKeepFiles" ng-model="keepFiles">
          <label class="form-check-label small" for="cpaKeepFiles">
            Keep the files and only forget the installation
          </label>
        </div>

        <label class="form-label small" for="cpaConfirm">
          Type <span class="cpa-mono fw-semibold">{{ install.confirmText }}</span> to confirm
        </label>
        <input id="cpaConfirm" class="form-control mb-3" ng-model="confirmText"
               autocomplete="off" maxlength="320">

        <button type="button" class="btn btn-danger btn-sm"
                ng-disabled="busy || confirmText !== install.confirmText"
                ng-click="remove()">
          <i class="fas fa-trash me-1"></i>Uninstall
        </button>

        <div class="mt-3" ng-show="progress > 0" ng-cloak>
          <div class="progress" role="progressbar" aria-label="Job progress"
               aria-valuemin="0" aria-valuemax="100" aria-valuenow="{$ progress $}">
            <div class="progress-bar bg-danger" ng-style="{width: progress + '%'}"></div>
          </div>
          <p class="small mt-2 mb-0" ng-bind="statusMessage"></p>
        </div>
      </div>
    </div>

    <div class="col-lg-7">
      <div class="cpa-panel">
        <h2 class="h6 mb-3">Install log</h2>
        <div class="cpa-log">
          {% for entry in logs %}
            <div><span class="cpa-muted">{{ entry.ts }}</span> {{ entry.line }}</div>
          {% empty %}
            <div class="cpa-muted">Nothing logged for this installation.</div>
          {% endfor %}
        </div>
        <p class="small cpa-muted mt-3 mb-0">
          The live progress file is temporary; these lines are kept with the
          installation record.
        </p>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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