{% extends "baseTemplate/index.html" %}
{% load static %}
{# OpenLiteSpeed real-time report, parsed from /tmp/lshttpd/.rtreport in views.py. #}

{% block title %}LiteSpeed status{% endblock %}

{% block styles %}
<style>
  .cp-stat        { border:1px solid var(--cp-border); border-radius:var(--cp-radius-lg);
                    padding:.9rem 1.05rem; background:var(--cp-bg-subtle); height:100%; }
  .cp-stat__label { font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
                    color:var(--cp-neutral); margin-bottom:.3rem; }
  .cp-stat__value { font-size:1.4rem; font-weight:600; line-height:1.1; }
  .cp-mono        { font-family:var(--cp-font-mono); font-size:.82rem; }
  .cp-raw         { font-family:var(--cp-font-mono); font-size:.76rem; white-space:pre-wrap;
                    max-height:22rem; overflow:auto; background:var(--cp-bg-subtle);
                    border:1px solid var(--cp-border); border-radius:var(--cp-radius);
                    padding:.85rem; margin:0; }
</style>
{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">OpenLiteSpeed</h1>
      <p class="text-muted mb-0 small">
        Real-time report read from the server's own status file.
        {% if report.version %}Version {{ report.version }}.{% endif %}
        {% if report.workers %}{{ report.workers }} worker process{{ report.workers|pluralize:"es" }}.{% endif %}
      </p>
    </div>
    <div class="d-flex align-items-center gap-2">
      <span class="badge {% if report.running %}text-bg-success{% else %}text-bg-danger{% endif %}">
        {% if report.running %}Running{% else %}Not running{% endif %}
      </span>
      <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>
      <button type="button" class="btn btn-primary btn-sm"
              ng-click="restart()" ng-disabled="busy">
        <i class="fas fa-rotate-right me-1"></i>Graceful restart
      </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>

  {% if not report.available %}
    <div class="alert alert-warning">
      <i class="fas fa-triangle-exclamation me-1"></i>
      Live counters are unavailable.
      {{ report.reportUnavailableReason|default:"OpenLiteSpeed has not written a real-time report yet." }}
      Version, running state and control output below still come from
      <code>lswsctrl</code> and <code>lshttpd -v</code>, which do not depend on that file.
    </div>
  {% endif %}

  <div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
      <div class="cp-stat">
        <div class="cp-stat__label">Uptime</div>
        <div class="cp-stat__value" style="font-size:1.05rem">{{ report.uptime|default:"—" }}</div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="cp-stat">
        <div class="cp-stat__label">Active connections</div>
        <div class="cp-stat__value">{{ report.metrics.PLAINCONN|default:0 }}
          <span class="text-muted" style="font-size:.9rem">+ {{ report.metrics.SSLCONN|default:0 }} TLS</span>
        </div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="cp-stat">
        <div class="cp-stat__label">Throughput in / out</div>
        <div class="cp-stat__value" style="font-size:1.05rem">
          {{ report.metrics.BPS_IN|default:0 }} / {{ report.metrics.BPS_OUT|default:0 }}
          <span class="text-muted" style="font-size:.8rem">B/s</span>
        </div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="cp-stat">
        <div class="cp-stat__label">Max connections</div>
        <div class="cp-stat__value">{{ report.metrics.MAXCONN|default:0 }}
          <span class="text-muted" style="font-size:.8rem">/ {{ report.metrics.MAXSSL_CONN|default:0 }} TLS</span>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header fw-semibold">Requests by virtual host</div>
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead>
          <tr>
            <th scope="col">Virtual host</th>
            <th scope="col" class="text-end">Processing</th>
            <th scope="col" class="text-end">Requests/s</th>
            <th scope="col" class="text-end">Total requests</th>
            <th scope="col" class="text-end">Cache hits/s</th>
          </tr>
        </thead>
        <tbody>
          {% for vhost in report.vhosts %}
            <tr{% if vhost.isTotal %} class="table-active fw-semibold"{% endif %}>
              <td class="cp-mono">{{ vhost.name }}</td>
              <td class="text-end">{{ vhost.REQ_PROCESSING|default:0 }}</td>
              <td class="text-end">{{ vhost.REQ_PER_SEC|default:0 }}</td>
              <td class="text-end">{{ vhost.TOT_REQS|default:0 }}</td>
              <td class="text-end">{{ vhost.CACHE_HITS_PER_SEC|default:0 }}</td>
            </tr>
          {% empty %}
            <tr><td colspan="5" class="text-muted text-center py-4">
              No virtual host counters are available.
            </td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="row g-3">
    <div class="col-12 col-lg-6">
      <div class="card h-100">
        <div class="card-header fw-semibold">All report counters</div>
        <div class="card-body">
          <div class="row g-2 cp-mono">
            {% for key, value in report.metrics.items %}
              <div class="col-12 col-sm-6 d-flex justify-content-between border-bottom py-1">
                <span class="text-muted">{{ key }}</span><span>{{ value }}</span>
              </div>
            {% empty %}
              <div class="col-12 text-muted">No counters were reported.</div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-6">
      <div class="card h-100">
        <div class="card-header fw-semibold">Control output</div>
        <div class="card-body">
          <pre class="cp-raw">{{ report.control|default:"lswsctrl produced no output." }}</pre>
          <p class="text-muted small mb-0 mt-2">{{ report.banner }}</p>
        </div>
      </div>
    </div>
  </div>

  <div class="card mt-3" ng-cloak>
    <div class="card-header d-flex align-items-center justify-content-between">
      <span class="fw-semibold">Raw report</span>
      <button type="button" class="btn btn-sm btn-outline-secondary" ng-click="showRaw = !showRaw">
        <span ng-bind="showRaw ? 'Hide' : 'Show'"></span>
      </button>
    </div>
    <div class="card-body" ng-show="showRaw">
      <pre class="cp-raw">{{ report.raw|default:"No raw report was captured." }}</pre>
    </div>
  </div>
</div>
{% endblock %}

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