{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
/cache/objectCache — Redis (or an operator-run Memcached) for one website.

The credentials shown here belong to the site being looked at and to nobody
else: the panel creates a Redis ACL user per site whose key pattern is that
site's prefix, so the password below unlocks exactly this site's keys.
{% endcomment %}

{% block title %}Object cache{% endblock %}

{% block styles %}
  {% include "cacheManager/_styles.html" %}
{% endblock %}

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

  {{ domains|json_script:"cpCacheDomains" }}
  {{ selectedDomain|json_script:"cpCacheSelected" }}
  {{ isAdmin|json_script:"cpCacheIsAdmin" }}
  {{ siteCacheDB|json_script:"cpCacheDB" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Object cache</h1>
      <p class="cpc-muted mb-0 small">
        Redis in front of your application's database queries and computed values.
      </p>
    </div>
    <a href="/cache/" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-arrow-left me-1"></i>All caches
    </a>
  </div>

  <div class="card mb-4">
    <div class="card-body">
      <div class="row g-2 align-items-end">
        <div class="col-md-8">
          <label class="form-label" for="cpcObjDomain">Website</label>
          <select class="form-select" id="cpcObjDomain" ng-model="domain"
                  ng-change="load()" ng-options="item as item for item in domains">
            <option value="">Choose a website…</option>
          </select>
        </div>
        <div class="col-md-4 text-md-end">
          <button type="button" class="btn btn-outline-secondary"
                  ng-click="load()" ng-disabled="busy || !domain">
            <i class="fas fa-rotate me-1"></i>Reload
          </button>
        </div>
      </div>
    </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="alert">
    <i class="fas fa-circle-check me-1"></i><span ng-bind="okMessage"></span>
  </div>
  <div class="alert alert-info py-2 px-3" ng-repeat="note in notes" ng-cloak role="status">
    <i class="fas fa-circle-info me-1"></i><span ng-bind="note"></span>
  </div>

  <div ng-show="busy" ng-cloak class="text-center cpc-muted py-5">
    <i class="fas fa-circle-notch fa-spin fa-2x"></i>
  </div>

  <div ng-show="!busy && loaded" ng-cloak>

    <div class="alert alert-warning py-2 px-3" ng-show="!state.redisAvailable">
      <i class="fas fa-triangle-exclamation me-1"></i>
      <strong>Redis is not answering.</strong> <span ng-bind="state.redisError"></span>
    </div>

    <!-- ---------------------------------------------------------------- -->
    <!-- Current state                                                     -->
    <!-- ---------------------------------------------------------------- -->
    <div class="cpc-panel p-3 p-md-4 mb-4">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
        <div>
          <h2 class="h6 mb-1">
            Object cache for <span class="cpc-mono" ng-bind="domain"></span>
          </h2>
          <p class="cpc-muted small mb-0">
            <span class="badge cpc-pill"
                  ng-class="state.enabled ? 'bg-success' : 'bg-secondary'"
                  ng-bind="state.enabled ? ('Enabled — ' + state.backend) : 'Disabled'"></span>
          </p>
        </div>
        <div class="d-flex flex-wrap gap-2">
          <button type="button" class="btn btn-outline-secondary btn-sm"
                  ng-show="state.enabled" ng-click="flush()" ng-disabled="saving">
            <i class="fas fa-broom me-1"></i>Flush this site
          </button>
          <button type="button" class="btn btn-outline-danger btn-sm"
                  ng-show="state.enabled" ng-click="disable()" ng-disabled="saving">
            <i class="fas fa-power-off me-1"></i>Disable
          </button>
        </div>
      </div>

      <div class="row g-3" ng-show="state.enabled">
        <div class="col-6 col-lg-3">
          <div class="cpc-stat">
            <div class="cpc-stat-value" ng-bind="state.keys"></div>
            <div class="cpc-stat-label">Cached entries</div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="cpc-stat">
            <div class="cpc-stat-value" ng-bind="state.ttl"></div>
            <div class="cpc-stat-label">TTL (seconds)</div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="cpc-stat">
            <div class="cpc-stat-value">
              <i class="fas"
                 ng-class="state.aclApplied ? 'fa-lock' : 'fa-lock-open'"></i>
            </div>
            <div class="cpc-stat-label">Key isolation</div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="cpc-stat">
            <div class="cpc-stat-value" ng-bind="state.database"></div>
            <div class="cpc-stat-label">Redis database</div>
          </div>
        </div>
      </div>
    </div>

    <!-- ---------------------------------------------------------------- -->
    <!-- Enable / reconfigure                                              -->
    <!-- ---------------------------------------------------------------- -->
    <div class="cpc-panel p-3 p-md-4 mb-4">
      <h2 class="h6 mb-3">
        <i class="fas fa-database me-1"></i>
        <span ng-bind="state.enabled ? 'Reconfigure' : 'Enable the object cache'"></span>
      </h2>

      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label" for="cpcBackend">Backend</label>
          <select class="form-select" id="cpcBackend" ng-model="form.backend">
            <option value="redis">Redis (recommended)</option>
            <option value="memcached" ng-if="isAdmin">Memcached</option>
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label" for="cpcObjTtl">TTL (seconds)</label>
          <input type="number" class="form-control" id="cpcObjTtl" min="30" max="31536000"
                 ng-model="form.ttl">
        </div>
        <div class="col-md-4" ng-show="form.backend === 'memcached'">
          <label class="form-label" for="cpcMemHost">Memcached host</label>
          <div class="input-group">
            <input type="text" class="form-control" id="cpcMemHost" ng-model="form.memcachedHost">
            <input type="number" class="form-control" style="max-width:7rem"
                   ng-model="form.memcachedPort" aria-label="Memcached port">
          </div>
        </div>
      </div>

      <div class="cpc-note mt-3" ng-show="form.backend === 'memcached'">
        <i class="fas fa-triangle-exclamation me-1"></i>
        Memcached has no authentication and no per-user key restrictions. The key
        prefix namespaces this site's entries but does not stop another process on
        this server from reading them. CloudPanel does not install or supervise
        Memcached. Redis is isolated per site and is what customers get by default.
      </div>

      <div class="d-flex justify-content-end mt-4">
        <button type="button" class="btn btn-primary" ng-click="enable()"
                ng-disabled="saving || !state.redisAvailable && form.backend === 'redis'">
          <i class="fas fa-bolt me-1"></i>
          <span ng-bind="state.enabled ? 'Apply' : 'Enable'"></span>
        </button>
      </div>
    </div>

    <!-- ---------------------------------------------------------------- -->
    <!-- Isolation + connection details                                    -->
    <!-- ---------------------------------------------------------------- -->
    <div class="cpc-panel p-3 p-md-4 mb-4">
      <h2 class="h6 mb-3"><i class="fas fa-shield-halved me-1"></i>How this site is isolated</h2>
      <p class="cpc-muted small">
        Every website on this server shares one Redis instance, so CloudPanel
        confines each site to its own key namespace and creates a Redis user whose
        key pattern is exactly that namespace. A request for a key outside it is
        refused by Redis itself, not by a convention in a configuration file.
      </p>

      <div class="row g-3">
        <div class="col-md-6">
          <div class="cpc-key">
            <div class="cpc-stat-label">Key prefix</div>
            <div class="cpc-mono" ng-bind="state.prefix"></div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="cpc-key">
            <div class="cpc-stat-label">Redis user</div>
            <div class="cpc-mono" ng-bind="state.aclUser"></div>
          </div>
        </div>
      </div>

      <div class="alert alert-warning py-2 px-3 mt-3 mb-0"
           ng-show="state.enabled && !state.aclApplied">
        <i class="fas fa-triangle-exclamation me-1"></i>
        The Redis user for this site is not currently in place — this happens after
        a <span class="cpc-mono">redis-server</span> restart, because runtime ACLs
        are not persisted. Reload this page and the panel will put it back.
      </div>

      <hr class="my-4">

      <h3 class="h6 mb-3">Connection details</h3>
      <p class="cpc-muted small">
        For a WordPress site these are already written into
        <span class="cpc-mono">wp-config.php</span>. For anything else, point your
        application's cache client at them. The password is not shown again here —
        it is written into the site's own configuration file, which the site owns.
      </p>
      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
          <tbody>
            <tr><th scope="row" class="w-25">Host</th>
                <td class="cpc-mono" ng-bind="state.connection.host"></td></tr>
            <tr><th scope="row">Port</th>
                <td class="cpc-mono" ng-bind="state.connection.port"></td></tr>
            <tr><th scope="row">Database</th>
                <td class="cpc-mono" ng-bind="state.connection.database"></td></tr>
            <tr><th scope="row">User</th>
                <td class="cpc-mono" ng-bind="state.connection.user"></td></tr>
            <tr><th scope="row">Key prefix</th>
                <td class="cpc-mono" ng-bind="state.connection.prefix"></td></tr>
          </tbody>
        </table>
      </div>
      <p class="cpc-muted small mb-0 mt-2">
        Websites connect over loopback TCP. The unix socket
        <span class="cpc-mono" ng-bind="state.connection.socketNote"></span> is mode
        0770 <span class="cpc-mono">redis:redis</span> and is reserved for the panel.
      </p>
    </div>

    <!-- ---------------------------------------------------------------- -->
    <!-- WordPress state                                                   -->
    <!-- ---------------------------------------------------------------- -->
    <div class="cpc-panel p-3 p-md-4">
      <h2 class="h6 mb-3"><i class="fas fa-plug me-1"></i>WordPress</h2>
      <div ng-show="!wordpress.isWordPress" class="cpc-note">
        <strong>This site is not a WordPress installation.</strong>
        CloudPanel wrote no configuration into it. Enabling the object cache still
        provisions the Redis user and key namespace above — use the connection
        details with whatever cache client your application has.
      </div>
      <div ng-show="wordpress.isWordPress">
        <p class="mb-2">
          <span class="badge cpc-pill me-1"
                ng-class="wordpress.objectCachePluginInstalled ? 'bg-success' : 'bg-secondary'"
                ng-bind="wordpress.objectCachePluginInstalled ? 'Plugin installed' : 'Plugin not installed'"></span>
          <span class="badge cpc-pill"
                ng-class="wordpress.objectCacheDropin ? 'bg-success' : 'bg-secondary'"
                ng-bind="wordpress.objectCacheDropin ? 'Drop-in active' : 'No drop-in'"></span>
        </p>
        <p class="cpc-muted small mb-0">
          Enabling the object cache installs the Redis object-cache plugin, writes
          the connection constants into <span class="cpc-mono">wp-config.php</span>
          and copies the plugin's
          <span class="cpc-mono">object-cache.php</span> drop-in into
          <span class="cpc-mono">wp-content/</span>. Disabling removes all three.
        </p>
      </div>
    </div>

  </div>

  <div ng-show="!busy && !loaded" ng-cloak class="text-center cpc-muted py-5">
    <div class="fs-2 mb-2"><i class="fa-regular fa-hand-pointer"></i></div>
    <p class="mb-0">Choose a website to see its object cache.</p>
  </div>
</div>
{% endblock %}

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