{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
Everything this account has installed.

The list comes from /apps/fetchInstalled, which is already narrowed to the
websites the caller owns — this page never asks for "all installs" and filters
afterwards. Uninstalling needs the exact location typed back, which is what
confirmText carries.
{% endcomment %}

{% block title %}Installed applications{% 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);
  }
  .cpa-muted { color: var(--cp-neutral); opacity: .75; }
  .cpa-mono { font-family: var(--cp-font-mono); font-size: .8rem; }
  .cpa-appicon {
    align-items: center; background: var(--cp-primary-soft); border-radius: var(--cp-radius);
    color: var(--cp-primary); display: inline-flex; height: 2rem; justify-content: center;
    width: 2rem;
  }
</style>
{% endblock %}

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

  {{ websites|json_script:"cpAppsWebsites" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Installed applications</h1>
      <p class="mb-0 small cpa-muted">
        Everything CloudPanel has installed for your websites, and where it put it.
      </p>
    </div>
    <a href="/apps/" class="btn btn-primary btn-sm">
      <i class="fas fa-plus me-1"></i>Install an application
    </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="cpa-panel p-3">
    <div class="row g-2 align-items-center mb-3">
      <div class="col-md-5">
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
          <input type="search" class="form-control" ng-model="search"
                 placeholder="Search by application, domain or path…"
                 aria-label="Search installations">
        </div>
      </div>
      <div class="col-md-4">
        <select class="form-select" ng-model="domainFilter" ng-change="load()"
                aria-label="Filter installations by website"
                ng-options="domain as domain for domain in websites">
          <option value="">Every website</option>
        </select>
      </div>
      <div class="col-md-3 text-md-end">
        <button type="button" class="btn btn-outline-secondary btn-sm"
                ng-click="load()" ng-disabled="busy">
          <i class="fas fa-rotate me-1"></i>Refresh
        </button>
      </div>
    </div>

    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead>
          <tr class="small cpa-muted">
            <th scope="col">Application</th>
            <th scope="col">Location</th>
            <th scope="col">Database</th>
            <th scope="col">Status</th>
            <th scope="col" class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody ng-cloak>
          <tr ng-repeat="row in installs | filter:search">
            <td>
              <div class="d-flex align-items-center gap-2">
                <span class="cpa-appicon"><i ng-class="row.icon"></i></span>
                <div>
                  <div class="fw-semibold" ng-bind="row.name"></div>
                  <div class="small cpa-muted" ng-bind="row.version"></div>
                </div>
              </div>
            </td>
            <td>
              <div ng-bind="row.domain"></div>
              <div class="cpa-mono cpa-muted" ng-bind="row.path"></div>
            </td>
            <td class="cpa-mono" ng-bind="row.dbName || '—'"></td>
            <td>
              <span class="badge" ng-show="!row.busy"
                    ng-class="row.status === 'installed' ? 'text-bg-success' : 'text-bg-danger'"
                    ng-bind="row.status"></span>
              <span class="small" ng-show="row.busy">
                <i class="fas fa-circle-notch fa-spin me-1"></i><span ng-bind="row.status"></span>
              </span>
              <div class="small cpa-muted" ng-bind="row.message"></div>
            </td>
            <td class="text-end">
              <div class="btn-group btn-group-sm">
                <a class="btn btn-outline-secondary" ng-href="/apps/detail/{$ row.id $}">
                  Details
                </a>
                <a class="btn btn-outline-secondary" ng-href="{$ row.adminUrl $}"
                   target="_blank" rel="noopener noreferrer" ng-show="row.adminUrl"
                   ng-attr-aria-label="Open the {$ row.name $} admin area for {$ row.domain $} in a new tab">
                  <i class="fas fa-up-right-from-square" aria-hidden="true"></i>
                </a>
                <button type="button" class="btn btn-outline-danger"
                        ng-disabled="row.busy" ng-click="remove(row)"
                        ng-attr-aria-label="Remove the {$ row.name $} installation on {$ row.domain $}">
                  <i class="fas fa-trash" aria-hidden="true"></i>
                </button>
              </div>
            </td>
          </tr>
          <tr ng-show="!installs.length && !busy">
            <td colspan="5" class="text-center py-5 cpa-muted">
              <i class="fas fa-box-open fa-2x mb-2 d-block"></i>
              Nothing installed yet.
              <a href="/apps/">Browse the catalogue →</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- uninstall dialog --------------------------------------------------- -->
  <div class="cpa-panel p-3 mt-3" ng-show="removing" ng-cloak>
    <h2 class="h6 mb-2 text-danger">
      <i class="fas fa-triangle-exclamation me-1"></i>Uninstall
      <span ng-bind="removing.name"></span>
    </h2>
    <p class="small mb-2">
      This deletes <span class="cpa-mono" ng-bind="removing.path"></span> and everything
      under it. There is no undo — take a backup first if you are not sure.
    </p>

    <div class="form-check mb-2" ng-show="removing.dbName">
      <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" ng-bind="removing.dbName"></span>
        and its user
      </label>
    </div>
    <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 on disk and only forget the installation
      </label>
    </div>

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

    <div class="d-flex gap-2">
      <button type="button" class="btn btn-danger btn-sm"
              ng-disabled="busy || confirmText !== removing.confirmText"
              ng-click="confirmRemove()">
        <i class="fas fa-trash me-1"></i>Uninstall
      </button>
      <button type="button" class="btn btn-outline-secondary btn-sm" ng-click="cancelRemove()">
        Cancel
      </button>
    </div>

    <div class="mt-3" ng-show="progress > 0">
      <div class="progress" role="progressbar" aria-label="Removal 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>
{% endblock %}

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