{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
/cache/ — one row per website the caller owns.

The rows come from /cache/fetchCacheStatus posted without a domain, which is
already narrowed to the signed-in account server side: this page never asks for
"all sites" and filters afterwards.
{% endcomment %}

{% block title %}Cache manager{% endblock %}

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

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

  {{ redisAvailable|json_script:"cpCacheRedisAvailable" }}
  {{ redisError|json_script:"cpCacheRedisError" }}
  {{ isAdmin|json_script:"cpCacheIsAdmin" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Cache manager</h1>
      <p class="cpc-muted mb-0 small">
        The LiteSpeed page cache and the Redis object cache for your websites.
      </p>
    </div>
    <div class="d-flex flex-wrap gap-2">
      <a href="/cache/lscache" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-bolt me-1"></i>Page cache
      </a>
      <a href="/cache/objectCache" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-database me-1"></i>Object cache
      </a>
      <a href="/cache/redis" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-chart-line me-1"></i>Redis
      </a>
    </div>
  </div>

  <div class="alert alert-warning py-2 px-3" ng-show="!redisAvailable" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i>
    <strong>Object caching is unavailable.</strong>
    <span ng-bind="redisError"></span>
    The LiteSpeed page cache below is unaffected — it is a web server feature and
    does not use Redis.
  </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="row g-3 mb-4" ng-cloak>
    <div class="col-6 col-lg-3">
      <div class="cpc-stat">
        <div class="cpc-stat-value" ng-bind="sites.length"></div>
        <div class="cpc-stat-label">Websites</div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="cpc-stat">
        <div class="cpc-stat-value" ng-bind="countPageCache()"></div>
        <div class="cpc-stat-label">Page cache on</div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="cpc-stat">
        <div class="cpc-stat-value" ng-bind="countObjectCache()"></div>
        <div class="cpc-stat-label">Object cache on</div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="cpc-stat">
        <div class="cpc-stat-value">
          <i class="fas" ng-class="redisAvailable ? 'fa-circle-check' : 'fa-circle-xmark'"></i>
        </div>
        <div class="cpc-stat-label">Redis</div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">

      <div class="row g-2 align-items-center mb-3">
        <div class="col-md-6">
          <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="Filter by domain…" aria-label="Filter websites">
          </div>
        </div>
        <div class="col-md-6 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>
              <th scope="col">Website</th>
              <th scope="col">Page cache</th>
              <th scope="col">Object cache</th>
              <th scope="col">Last change</th>
              <th scope="col" class="text-end">Manage</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="site in sites | filter:{domain: search}" ng-cloak>
              <td class="cpc-mono" ng-bind="site.domain"></td>
              <td>
                <span class="badge cpc-pill"
                      ng-class="site.lscacheEnabled ? 'bg-success' : 'bg-secondary'"
                      ng-bind="site.lscacheEnabled ? 'Enabled' : 'Off'"></span>
                <span class="small cpc-muted ms-2" ng-show="site.lscacheEnabled">
                  TTL <span ng-bind="site.lscacheTtl"></span>s
                </span>
              </td>
              <td>
                <span class="badge cpc-pill"
                      ng-class="site.objectEnabled ? 'bg-success' : 'bg-secondary'"
                      ng-bind="site.objectEnabled ? site.objectBackend : 'Off'"></span>
              </td>
              <td class="small cpc-muted"
                  ng-bind="site.lastModified ? (site.lastModified | date:'short') : '—'"></td>
              <td class="text-end">
                <div class="btn-group btn-group-sm" role="group" aria-label="Manage cache">
                  <a class="btn btn-outline-secondary"
                     ng-href="/cache/lscache?domain={$ site.domain $}" title="Page cache">
                    <i class="fas fa-bolt"></i>
                  </a>
                  <a class="btn btn-outline-secondary"
                     ng-href="/cache/objectCache?domain={$ site.domain $}" title="Object cache">
                    <i class="fas fa-database"></i>
                  </a>
                </div>
              </td>
            </tr>

            <tr ng-show="busy" ng-cloak>
              <td colspan="5" class="text-center cpc-muted py-4">
                <i class="fas fa-circle-notch fa-spin me-1"></i>Loading…
              </td>
            </tr>

            <tr ng-show="!busy && sites.length === 0" ng-cloak>
              <td colspan="5" class="text-center cpc-muted py-5">
                <div class="fs-2 mb-2"><i class="fa-regular fa-hard-drive"></i></div>
                <p class="mb-0">There are no websites on this account yet.</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>

  <div class="cpc-note mt-4" ng-cloak>
    <i class="fas fa-circle-info me-1"></i>
    The <strong>page cache</strong> stores whole responses on disk and is served by
    OpenLiteSpeed before PHP runs. The <strong>object cache</strong> stores the
    fragments an application computes — database rows, rendered widgets — in Redis.
    They are independent: a site can use either, both, or neither.
  </div>
</div>
{% endblock %}

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