{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
/cache/lscache — the LiteSpeed full-page cache for one website.

The website list is rendered from `domains`, which ACLManager.findAllSites
already narrowed to the caller. Picking one posts to /cache/fetchCacheStatus,
which re-resolves ownership server side; nothing on this page is trusted
because it came from this select.
{% endcomment %}

{% block title %}LiteSpeed page cache{% endblock %}

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

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

  {{ domains|json_script:"cpCacheDomains" }}
  {{ selectedDomain|json_script:"cpCacheSelected" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">LiteSpeed page cache</h1>
      <p class="cpc-muted mb-0 small">
        Full-page caching inside OpenLiteSpeed, configured per website.
      </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="cpcDomain">Website</label>
          <select class="form-select" id="cpcDomain" 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 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>

    <!-- ---------------------------------------------------------------- -->
    <!-- Master switch                                                     -->
    <!-- ---------------------------------------------------------------- -->
    <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">
        <div>
          <h2 class="h6 mb-1">
            Page cache for <span class="cpc-mono" ng-bind="domain"></span>
          </h2>
          <p class="cpc-muted small mb-0">
            When this is on, OpenLiteSpeed stores cacheable responses on disk and
            serves repeat visitors without starting PHP at all.
          </p>
        </div>
        <div class="form-check form-switch fs-5 mb-0">
          <input class="form-check-input" type="checkbox" role="switch"
                 id="cpcEnabled" ng-model="settings.enabled" ng-true-value="1"
                 ng-false-value="0" ng-change="toggle()" ng-disabled="saving">
          <label class="form-check-label fs-6 ms-1" for="cpcEnabled"
                 ng-bind="settings.enabled ? 'Enabled' : 'Disabled'"></label>
        </div>
      </div>
    </div>

    <!-- ---------------------------------------------------------------- -->
    <!-- WordPress / not WordPress                                         -->
    <!-- ---------------------------------------------------------------- -->
    <div class="cpc-panel p-3 p-md-4 mb-4">
      <h2 class="h6 mb-3"><i class="fas fa-plug me-1"></i>WordPress integration</h2>

      <div ng-show="!wordpress.isWordPress">
        <div class="cpc-note">
          <strong>This site is not a WordPress installation.</strong>
          There is no <span class="cpc-mono">wp-config.php</span> in
          <span class="cpc-mono" ng-bind="wordpress.docroot"></span>.
          The page cache above still works — it is a web server feature and caches
          any public, cacheable response. What is not available is the
          plugin-driven part: automatic purging when content changes, per-page
          cache rules and ESI. Your application can drive those itself by sending
          <span class="cpc-mono">X-LiteSpeed-Cache-Control</span> and
          <span class="cpc-mono">X-LiteSpeed-Purge</span> response headers.
        </div>
      </div>

      <div ng-show="wordpress.isWordPress">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
          <div>
            <p class="mb-1">
              <span class="badge cpc-pill"
                    ng-class="wordpress.lscachePluginActive ? 'bg-success'
                              : (wordpress.lscachePluginInstalled ? 'bg-warning text-dark' : 'bg-secondary')"
                    ng-bind="wordpress.lscachePluginActive ? 'Plugin active'
                             : (wordpress.lscachePluginInstalled ? 'Plugin installed, not active' : 'Plugin not installed')">
              </span>
            </p>
            <p class="cpc-muted small mb-0">
              The LiteSpeed Cache plugin lets WordPress purge exactly the pages it
              changed instead of waiting for the TTL to expire.
            </p>
          </div>
          <button type="button" class="btn btn-primary btn-sm"
                  ng-show="!wordpress.lscachePluginActive"
                  ng-click="installPlugin()" ng-disabled="saving || !wordpress.wpAvailable">
            <i class="fas fa-download me-1"></i>
            <span ng-bind="wordpress.lscachePluginInstalled ? 'Activate plugin' : 'Install &amp; activate'"></span>
          </button>
        </div>
        <div class="alert alert-warning py-2 px-3 mt-3 mb-0" ng-show="!wordpress.wpAvailable">
          This website has no system user recorded, so wp-cli cannot run for it.
        </div>
      </div>
    </div>

    <!-- ---------------------------------------------------------------- -->
    <!-- Settings                                                          -->
    <!-- ---------------------------------------------------------------- -->
    <div class="cpc-panel p-3 p-md-4 mb-4">
      <h2 class="h6 mb-3"><i class="fas fa-sliders me-1"></i>Cache behaviour</h2>

      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label" for="cpcTtl">Public cache TTL (seconds)</label>
          <input type="number" class="form-control" id="cpcTtl" min="30" max="31536000"
                 ng-model="settings.ttl">
          <div class="form-text">How long an anonymous visitor's page stays cached.</div>
        </div>
        <div class="col-md-4">
          <label class="form-label" for="cpcPrivateTtl">Private cache TTL (seconds)</label>
          <input type="number" class="form-control" id="cpcPrivateTtl" min="30" max="31536000"
                 ng-model="settings.privateTtl">
          <div class="form-text">Applies to logged-in visitors, per session.</div>
        </div>
        <div class="col-md-4">
          <label class="form-label" for="cpcStale">Maximum stale age (seconds)</label>
          <input type="number" class="form-control" id="cpcStale" min="0" max="31536000"
                 ng-model="settings.maxStaleAge">
          <div class="form-text">How long an expired copy may still be served while it refreshes.</div>
        </div>
        <div class="col-md-4">
          <label class="form-label" for="cpcMaxObj">Maximum object size (bytes)</label>
          <input type="number" class="form-control" id="cpcMaxObj" min="1024" max="1073741824"
                 ng-model="settings.maxCacheObjSize">
          <div class="form-text">Responses larger than this are never cached.</div>
        </div>
      </div>

      <hr class="my-4">

      <div class="row g-3">
        <div class="col-md-6" ng-repeat="flag in flags">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch"
                   id="cpc-{$ flag.key $}" ng-model="settings[flag.key]"
                   ng-true-value="1" ng-false-value="0">
            <label class="form-check-label" ng-attr-for="cpc-{$ flag.key $}">
              <span ng-bind="flag.label"></span>
            </label>
            <div class="form-text" ng-bind="flag.help"></div>
          </div>
        </div>
      </div>

      <div class="d-flex justify-content-end mt-4">
        <button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="saving">
          <i class="fas fa-floppy-disk me-1"></i>Save settings
        </button>
      </div>
    </div>

    <!-- ---------------------------------------------------------------- -->
    <!-- Purge                                                             -->
    <!-- ---------------------------------------------------------------- -->
    <div class="cpc-panel p-3 p-md-4">
      <h2 class="h6 mb-3"><i class="fas fa-broom me-1"></i>Purge the cache</h2>
      <p class="cpc-muted small">
        Deletes every cached page for this site. The next visitor to each page pays
        for regenerating it, so expect a brief slowdown rather than an outage.
      </p>
      <div class="cpc-key mb-3">
        <div class="cpc-stat-label">Storage path</div>
        <div class="cpc-mono" ng-bind="storagePath"></div>
      </div>
      <div class="alert alert-warning py-2 px-3" ng-show="storageWarning" ng-cloak>
        <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="storageWarning"></span>
      </div>
      <button type="button" class="btn btn-outline-danger"
              ng-click="purge()" ng-disabled="saving || !storagePurgeable">
        <i class="fas fa-broom me-1"></i>Purge now
      </button>
    </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 page cache settings.</p>
  </div>
</div>
{% endblock %}

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