{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} One WordPress installation: core, plugins, themes, settings and a security
   panel. Every action goes through the daemon's wp verb, which runs wp-cli as
   the site's own user and refuses wp eval / eval-file / shell / db query. {% endcomment %}

{% block title %}{{ site.title|default:"WordPress site" }}{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">{{ site.title|default:"WordPress site" }}</h1>
      <p class="text-muted mb-0 small">
        <code>{{ site.path }}</code> on
        <a href="/websites/listWebsites" class="text-decoration-none">{{ website.domain }}</a>
      </p>
    </div>
    <div class="btn-group btn-group-sm">
      <a href="/websites/listWordPress" class="btn btn-outline-secondary">
        <i class="fa-brands fa-wordpress me-1"></i>All installations
      </a>
      <a ng-href="{$ site.url $}/wp-admin/" target="_blank" rel="noopener"
         class="btn btn-outline-primary" ng-show="site.url">
        <i class="fas fa-arrow-up-right-from-square me-1"></i>wp-admin
      </a>
      <button type="button" class="btn btn-outline-primary" ng-click="autoLogin()"
              ng-disabled="busy || !reset.user" ng-show="reset.user"
              title="Open wp-admin as {$ reset.user $}, no password needed">
        <i class="fas fa-right-to-bracket me-1"></i>Log in as {$ reset.user $}
      </button>
    </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>
  <div class="alert alert-success py-2 px-3" ng-show="okMessage" ng-cloak role="status">
    <i class="fas fa-circle-check me-1"></i>
    <span ng-bind="okMessage"></span>
  </div>

  <!-- summary -->
  <div class="row g-3 mb-4">
    <div class="col-md-3">
      <div class="card h-100">
        <div class="card-body">
          <div class="small text-muted">Core version</div>
          <div class="h5 mb-0" ng-bind="site.version || 'unknown'"></div>
          <div class="small mt-1">
            <span class="badge rounded-pill text-bg-warning" ng-show="site.coreUpdate">
              <span ng-bind="site.coreUpdate"></span> available
            </span>
            <span class="badge rounded-pill text-bg-success" ng-show="!site.coreUpdate">
              Up to date
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card h-100">
        <div class="card-body">
          <div class="small text-muted">Plugins</div>
          <div class="h5 mb-0"><span ng-bind="plugins.length"></span></div>
          <div class="small text-muted">
            <span ng-bind="pluginUpdates()"></span> with updates
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card h-100">
        <div class="card-body">
          <div class="small text-muted">Themes</div>
          <div class="h5 mb-0"><span ng-bind="themes.length"></span></div>
          <div class="small text-muted">
            <span ng-bind="themeUpdates()"></span> with updates
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card h-100">
        <div class="card-body">
          <div class="small text-muted">Automatic updates</div>
          <div class="form-check form-switch mt-1">
            <input class="form-check-input" type="checkbox" id="cpWpAuto"
                   ng-model="site.autoUpdates" ng-change="toggleAutoUpdate()"
                   ng-disabled="busy">
            <label class="form-check-label small" for="cpWpAuto"
                   ng-bind="site.autoUpdates ? 'Enabled' : 'Disabled'"></label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-body d-flex flex-wrap gap-2 align-items-center">
      <button type="button" class="btn btn-primary btn-sm"
              ng-click="updateAll()" ng-disabled="running">
        <i class="fas fa-arrow-up me-1"></i>Update core, plugins and themes
      </button>
      <button type="button" class="btn btn-outline-secondary btn-sm"
              ng-click="updateCoreOnly()" ng-disabled="running">
        <i class="fa-brands fa-wordpress me-1"></i>Update core only
      </button>
      <button type="button" class="btn btn-outline-secondary btn-sm"
              ng-click="refresh()" ng-disabled="busy">
        <i class="fas fa-rotate me-1"></i>Refresh
      </button>
    </div>
  </div>

  <div class="card mb-4" ng-show="started" ng-cloak>
    <div class="card-body">
      <div class="progress" role="progressbar" aria-label="Update 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>

  <ul class="nav nav-tabs mb-4" role="tablist">
    <li class="nav-item"><button type="button" class="nav-link"
        ng-class="{active: tab === 'plugins'}" ng-click="tab = 'plugins'">
        <i class="fas fa-plug me-1"></i>Plugins</button></li>
    <li class="nav-item"><button type="button" class="nav-link"
        ng-class="{active: tab === 'themes'}" ng-click="tab = 'themes'">
        <i class="fas fa-palette me-1"></i>Themes</button></li>
    <li class="nav-item"><button type="button" class="nav-link"
        ng-class="{active: tab === 'settings'}" ng-click="tab = 'settings'">
        <i class="fas fa-sliders me-1"></i>Settings</button></li>
    <li class="nav-item"><button type="button" class="nav-link"
        ng-class="{active: tab === 'security'}" ng-click="tab = 'security'">
        <i class="fas fa-shield-halved me-1"></i>Security</button></li>
    <li class="nav-item"><button type="button" class="nav-link"
        ng-class="{active: tab === 'backups'}" ng-click="tab = 'backups'">
        <i class="fas fa-box-archive me-1"></i>Backups</button></li>
    <li class="nav-item"><button type="button" class="nav-link"
        ng-class="{active: tab === 'toggles'}" ng-click="tab = 'toggles'">
        <i class="fas fa-toggle-on me-1"></i>Toggles</button></li>
  </ul>

  <!-- plugins -->
  <div class="card" ng-show="tab === 'plugins'" ng-cloak>
    <div class="card-body">
      <form class="row g-2 mb-3" novalidate ng-submit="installPlugin()">
        <div class="col-md-6">
          <input type="text" class="form-control" ng-model="newPlugin"
                 placeholder="Plugin slug, or an https://… .zip URL"
                 aria-label="Plugin to install">
        </div>
        <div class="col-md-3">
          <div class="form-check form-switch mt-2">
            <input class="form-check-input" type="checkbox" id="cpPluginActivate"
                   ng-model="activateAfterInstall">
            <label class="form-check-label small" for="cpPluginActivate">
              Activate after installing
            </label>
          </div>
        </div>
        <div class="col-md-3 text-md-end">
          <button type="submit" class="btn btn-primary btn-sm" ng-disabled="busy">
            <i class="fas fa-plus me-1"></i>Install plugin
          </button>
        </div>
      </form>

      <div class="d-flex justify-content-end mb-2" ng-show="plugins.length > 0">
        <button type="button" class="btn btn-outline-primary btn-sm"
                ng-click="bulkUpdatePlugins()"
                ng-disabled="busy || selectedPlugins().length === 0">
          <i class="fas fa-arrow-up me-1"></i>Update selected
          (<span ng-bind="selectedPlugins().length"></span>)
        </button>
      </div>

      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead>
            <tr>
              <th scope="col"></th>
              <th scope="col">Plugin</th>
              <th scope="col">Version</th>
              <th scope="col">Update</th>
              <th scope="col">Status</th>
              <th scope="col" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="plugin in plugins">
              <td>
                <input type="checkbox" class="form-check-input" ng-model="plugin._selected"
                       ng-show="plugin.update === 'available'" aria-label="Select for bulk update">
              </td>
              <td>
                <div class="fw-semibold" ng-bind="plugin.title"></div>
                <div class="small text-muted font-monospace" ng-bind="plugin.name"></div>
              </td>
              <td ng-bind="plugin.version"></td>
              <td>
                <span class="badge rounded-pill text-bg-warning"
                      ng-show="plugin.update === 'available'"
                      ng-bind="plugin.updateVersion"></span>
                <span class="small text-muted" ng-show="plugin.update !== 'available'">—</span>
              </td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="plugin.status === 'active' ? 'text-bg-success' : 'text-bg-secondary'"
                      ng-bind="plugin.status"></span>
              </td>
              <td class="text-end">
                <div class="btn-group btn-group-sm">
                  <button type="button" class="btn btn-outline-secondary"
                          ng-click="togglePlugin(plugin)" ng-disabled="busy"
                          ng-bind="plugin.status === 'active' ? 'Deactivate' : 'Activate'"></button>
                  <button type="button" class="btn btn-outline-danger"
                          ng-click="deletePlugin(plugin)" ng-disabled="busy">
                    Delete
                  </button>
                </div>
              </td>
            </tr>
            <tr ng-show="!busy && plugins.length === 0">
              <td colspan="6" class="text-center text-muted py-4">No plugins found.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- themes -->
  <div class="card" ng-show="tab === 'themes'" ng-cloak>
    <div class="card-body">
      <form class="row g-2 mb-3" novalidate ng-submit="installTheme()">
        <div class="col-md-6">
          <input type="text" class="form-control" ng-model="newTheme"
                 placeholder="Theme slug, or an https://… .zip URL"
                 aria-label="Theme to install">
        </div>
        <div class="col-md-3">
          <div class="form-check form-switch mt-2">
            <input class="form-check-input" type="checkbox" id="cpThemeActivate"
                   ng-model="activateAfterInstall">
            <label class="form-check-label small" for="cpThemeActivate">
              Activate after installing
            </label>
          </div>
        </div>
        <div class="col-md-3 text-md-end">
          <button type="submit" class="btn btn-primary btn-sm" ng-disabled="busy">
            <i class="fas fa-plus me-1"></i>Install theme
          </button>
        </div>
      </form>

      <div class="d-flex justify-content-end mb-2" ng-show="themes.length > 0">
        <button type="button" class="btn btn-outline-primary btn-sm"
                ng-click="bulkUpdateThemes()"
                ng-disabled="busy || selectedThemes().length === 0">
          <i class="fas fa-arrow-up me-1"></i>Update selected
          (<span ng-bind="selectedThemes().length"></span>)
        </button>
      </div>

      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead>
            <tr>
              <th scope="col"></th>
              <th scope="col">Theme</th>
              <th scope="col">Version</th>
              <th scope="col">Update</th>
              <th scope="col">Status</th>
              <th scope="col" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="theme in themes">
              <td>
                <input type="checkbox" class="form-check-input" ng-model="theme._selected"
                       ng-show="theme.update === 'available'" aria-label="Select for bulk update">
              </td>
              <td>
                <div class="fw-semibold" ng-bind="theme.title"></div>
                <div class="small text-muted font-monospace" ng-bind="theme.name"></div>
              </td>
              <td ng-bind="theme.version"></td>
              <td>
                <span class="badge rounded-pill text-bg-warning"
                      ng-show="theme.update === 'available'"
                      ng-bind="theme.updateVersion"></span>
                <span class="small text-muted" ng-show="theme.update !== 'available'">—</span>
              </td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="theme.status === 'active' ? 'text-bg-success' : 'text-bg-secondary'"
                      ng-bind="theme.status"></span>
              </td>
              <td class="text-end">
                <div class="btn-group btn-group-sm">
                  <button type="button" class="btn btn-outline-secondary"
                          ng-click="activateTheme(theme)"
                          ng-disabled="busy || theme.status === 'active'">
                    Activate
                  </button>
                  <button type="button" class="btn btn-outline-danger"
                          ng-click="deleteTheme(theme)"
                          ng-disabled="busy || theme.status === 'active'">
                    Delete
                  </button>
                </div>
              </td>
            </tr>
            <tr ng-show="!busy && themes.length === 0">
              <td colspan="6" class="text-center text-muted py-4">No themes found.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- settings -->
  <div class="row g-4" ng-show="tab === 'settings'" ng-cloak>
    <div class="col-lg-6">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3"><i class="fas fa-link me-1 text-primary"></i>Site address</h2>
          <form novalidate ng-submit="changeUrl()">
            <label class="form-label" for="cpWpUrl">New address</label>
            <input type="text" class="form-control" id="cpWpUrl" ng-model="newUrl"
                   placeholder="https://example.com">
            <div class="form-text mb-3">
              The database is rewritten with <code>wp search-replace</code> so
              serialised settings survive. The address must be a domain this
              panel already serves for this site.
            </div>
            <button type="submit" class="btn btn-primary btn-sm" ng-disabled="busy">
              Change the site address
            </button>
          </form>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3"><i class="fas fa-key me-1 text-primary"></i>
            Reset an administrator password</h2>
          <form novalidate ng-submit="resetPassword()">
            <label class="form-label" for="cpWpUser">WordPress user</label>
            <input type="text" class="form-control mb-2" id="cpWpUser"
                   ng-model="reset.user" placeholder="{{ site.WPusername }}">
            <label class="form-label" for="cpWpPass">New password</label>
            <input type="text" class="form-control" id="cpWpPass"
                   ng-model="reset.password"
                   placeholder="Leave blank to generate one">
            <div class="form-text mb-3">
              The password is shown once, here. The panel does not store it.
            </div>
            <button type="submit" class="btn btn-primary btn-sm" ng-disabled="busy">
              Reset the password
            </button>
          </form>
          <div class="alert alert-success mt-3 mb-0" ng-show="newPassword" ng-cloak>
            <div class="small">New password for
              <strong ng-bind="resetUser"></strong>:</div>
            <code class="user-select-all" ng-bind="newPassword"></code>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- security -->
  <div ng-show="tab === 'security'" ng-cloak>
    <div class="card mb-4">
      <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-shield-halved me-1 text-primary"></i>Security scan
          </h2>
          <button type="button" class="btn btn-sm btn-primary"
                  ng-click="scan()" ng-disabled="busy">
            <i class="fas fa-magnifying-glass me-1"></i>Run the scan
          </button>
        </div>

        {% if not feedConfigured %}
          <div class="alert alert-secondary py-2 px-3 small mb-3">
            <i class="fas fa-circle-info me-1"></i>
            No vulnerability feed is configured on this server
            (<code>/etc/cloudpanel/wp-vulnerabilities.json</code>), so known
            vulnerabilities cannot be checked. The scan still reports pending
            updates and file permissions — it will not show a green tick for a
            check it did not perform.
          </div>
        {% endif %}

        <div class="alert py-2 px-3 small"
             ng-class="scanResult.feedConfigured ? 'alert-info' : 'alert-warning'"
             ng-show="scanResult.feedMessage" ng-cloak>
          <span ng-bind="scanResult.feedMessage"></span>
          <span ng-show="scanResult.feedGenerated">
            Feed generated <span ng-bind="scanResult.feedGenerated"></span>.
          </span>
        </div>

        <div ng-show="scanned" ng-cloak>
          <h3 class="h6 mt-3">Findings</h3>
          <p class="small text-muted" ng-show="scanResult.findings.length === 0">
            Nothing was flagged by the checks that ran.
          </p>
          <div class="table-responsive" ng-show="scanResult.findings.length > 0">
            <table class="table table-sm align-middle">
              <thead>
                <tr>
                  <th scope="col">Severity</th>
                  <th scope="col">Item</th>
                  <th scope="col">Installed</th>
                  <th scope="col">Fixed in</th>
                  <th scope="col">Detail</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="finding in scanResult.findings">
                  <td>
                    <span class="badge rounded-pill"
                          ng-class="{'text-bg-danger': finding.severity === 'critical' || finding.severity === 'high',
                                     'text-bg-warning': finding.severity === 'medium',
                                     'text-bg-secondary': finding.severity !== 'critical' && finding.severity !== 'high' && finding.severity !== 'medium'}"
                          ng-bind="finding.severity"></span>
                  </td>
                  <td class="font-monospace small" ng-bind="finding.slug"></td>
                  <td class="small" ng-bind="finding.version"></td>
                  <td class="small" ng-bind="finding.fixedIn || '—'"></td>
                  <td class="small">
                    <span ng-bind="finding.title"></span>
                    <a ng-href="{$ finding.reference $}" target="_blank" rel="noopener"
                       ng-show="finding.reference" class="ms-1">advisory</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <h3 class="h6 mt-4">Configuration checks</h3>
          <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex justify-content-between align-items-start gap-3"
                ng-repeat="check in scanResult.checks">
              <div>
                <div class="fw-semibold font-monospace small" ng-bind="check.path"></div>
                <div class="small text-muted" ng-bind="check.detail"></div>
              </div>
              <div class="text-end">
                <span class="badge rounded-pill"
                      ng-class="check.ok ? 'text-bg-success' : 'text-bg-warning'"
                      ng-bind="check.ok ? 'OK' : 'Review'"></span>
                <div class="small text-muted font-monospace" ng-bind="check.mode"></div>
              </div>
            </li>
          </ul>

          <h3 class="h6 mt-4">Pending updates</h3>
          <p class="small text-muted" ng-show="scanResult.outdated.length === 0">
            Every plugin and theme is at its latest version.
          </p>
          <ul class="small mb-0">
            <li ng-repeat="item in scanResult.outdated">
              <span class="font-monospace" ng-bind="item.slug"></span>
              (<span ng-bind="item.kind"></span>)
              <span ng-bind="item.version"></span> →
              <span class="fw-semibold" ng-bind="item.available"></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- backups -->
  <div ng-controller="wordPressBackupsController" ng-show="tab === 'backups'" ng-cloak>
    <div class="card mb-4">
      <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-box-archive me-1 text-primary"></i>Backups
          </h2>
          <button type="button" class="btn btn-sm btn-primary"
                  ng-click="createBackup()" ng-disabled="running">
            <i class="fas fa-plus me-1"></i>Back up now
          </button>
        </div>
        <p class="small text-muted mb-3">
          A backup archives this installation's files and a dump of its
          database into <code>/home/{$ site.domain || '…' $}/backups/wordpress/</code>.
        </p>

        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead>
              <tr>
                <th scope="col">Archive</th>
                <th scope="col">Size</th>
                <th scope="col">Created</th>
                <th scope="col" class="text-end">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="backup in backups">
                <td class="font-monospace small" ng-bind="backup.fileName"></td>
                <td ng-bind="backup.size | cpBytes"></td>
                <td ng-bind="backup.date"></td>
                <td class="text-end">
                  <div class="btn-group btn-group-sm">
                    <a class="btn btn-outline-secondary" ng-href="{$ downloadUrl(backup) $}"
                       target="_blank" rel="noopener">
                      <i class="fas fa-download"></i>
                    </a>
                    <button type="button" class="btn btn-outline-warning"
                            ng-click="confirmRestore(backup)" ng-disabled="running">
                      Restore
                    </button>
                    <button type="button" class="btn btn-outline-danger"
                            ng-click="deleteBackup(backup)" ng-disabled="backupsBusy || running">
                      Delete
                    </button>
                  </div>
                </td>
              </tr>
              <tr ng-show="!backupsBusy && backups.length === 0">
                <td colspan="4" class="text-center text-muted py-4">No backups yet.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="card mb-4" ng-show="restore.fileName" ng-cloak>
      <div class="card-body">
        <h2 class="h6 mb-3"><i class="fas fa-clock-rotate-left me-1 text-warning"></i>
          Restore <span class="font-monospace" ng-bind="restore.fileName"></span></h2>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="cpRestoreFiles"
                 ng-model="restore.files">
          <label class="form-check-label" for="cpRestoreFiles">Restore files</label>
        </div>
        <div class="form-check mb-3">
          <input type="checkbox" class="form-check-input" id="cpRestoreDb"
                 ng-model="restore.database">
          <label class="form-check-label" for="cpRestoreDb">Restore database</label>
        </div>
        <button type="button" class="btn btn-warning btn-sm" ng-click="restoreBackup()"
                ng-disabled="running || (!restore.files && !restore.database)">
          <i class="fas fa-clock-rotate-left me-1"></i>Restore this backup
        </button>
        <button type="button" class="btn btn-outline-secondary btn-sm ms-2"
                ng-click="cancelRestore()">
          Cancel
        </button>
      </div>
    </div>
  </div>

  <!-- toggles -->
  <div ng-controller="wordPressTogglesController" ng-show="tab === 'toggles'" ng-cloak>
    <div class="card mb-4">
      <div class="card-body">
        <h2 class="h6 mb-3"><i class="fas fa-toggle-on me-1 text-primary"></i>Toggles</h2>
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <div class="fw-semibold">Maintenance mode</div>
              <div class="small text-muted">Shows visitors a maintenance page instead of the site.</div>
            </div>
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="cpTglMaint"
                     ng-model="toggles.maintenanceMode" ng-change="toggleMaintenance()"
                     ng-disabled="togglesBusy">
            </div>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <div class="fw-semibold">WP_DEBUG</div>
              <div class="small text-muted">Writes PHP notices and warnings to the debug log.</div>
            </div>
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="cpTglDebug"
                     ng-model="toggles.debug" ng-change="toggleDebug()"
                     ng-disabled="togglesBusy">
            </div>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <div class="fw-semibold">Search-engine visibility</div>
              <div class="small text-muted">Off discourages search engines from indexing this site.</div>
            </div>
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="cpTglVisible"
                     ng-model="toggles.searchEngineVisible" ng-change="toggleVisibility()"
                     ng-disabled="togglesBusy">
            </div>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <div class="fw-semibold">Disable XML-RPC</div>
              <div class="small text-muted">Blocks the xmlrpc.php API, a common target for password guessing.</div>
            </div>
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="cpTglXmlrpc"
                     ng-model="toggles.xmlrpcDisabled" ng-change="toggleXmlrpc()"
                     ng-disabled="togglesBusy">
            </div>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <div class="fw-semibold">LiteSpeed Cache</div>
              <div class="small text-muted">
                Installs and activates the LiteSpeed Cache plugin for this installation.
              </div>
            </div>
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="cpTglLscache"
                     ng-model="toggles.liteSpeedCacheActive" ng-change="toggleLiteSpeedCache()"
                     ng-disabled="togglesBusy">
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_WP_SITE = {
    id: {{ wpId }},
    domain: "{{ website.domain|escapejs }}",
    path: "{{ site.path|escapejs }}",
    version: "{{ site.version|escapejs }}",
    autoUpdates: {% if site.AutoUpdates %}true{% else %}false{% endif %},
    user: "{{ site.WPusername|escapejs }}"
  };
</script>
<script src="{% static 'websiteFunctions/websiteFunctions.js' %}"></script>
<script src="{% static 'websiteFunctions/wordpressManager.js' %}"></script>
{% endblock %}