{% extends "baseTemplate/index.html" %}
{% load static %}
{# Server overview: identity, live gauges, the resource chart and service health. #}

{% block title %}Server status{% endblock %}

{% block styles %}
<style>
  .cp-stat        { border:1px solid var(--cp-border); border-radius:var(--cp-radius-lg);
                    padding:1rem 1.15rem; background:var(--cp-bg-subtle); height:100%; }
  .cp-stat__label { font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
                    color:var(--cp-neutral); margin-bottom:.35rem; }
  .cp-stat__value { font-size:1.6rem; font-weight:600; line-height:1.1; }
  .cp-stat__meta  { font-size:.8rem; color:var(--cp-neutral); }
  .cp-meter       { height:6px; border-radius:var(--cp-radius-pill);
                    background:var(--cp-border); overflow:hidden; margin-top:.6rem; }
  .cp-meter__fill { height:100%; border-radius:var(--cp-radius-pill);
                    background:var(--cp-primary); transition:width .4s ease; }
  .cp-meter__fill.is-warn   { background:var(--cp-accent); }
  .cp-meter__fill.is-danger { background:var(--cp-danger); }
  .cp-dot         { width:.55rem; height:.55rem; border-radius:50%; display:inline-block;
                    background:var(--cp-neutral); }
  .cp-dot.is-up   { background:var(--cp-primary); }
  .cp-dot.is-down { background:var(--cp-danger); }
  .cp-kv          { font-family:var(--cp-font-mono); font-size:.85rem; }
  .cp-chart-wrap  { position:relative; height:280px; }
</style>
{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Server status</h1>
      <p class="text-muted mb-0 small">
        {{ hostname }} &middot; {{ serverIP }} &middot; {{ info.os.prettyName }}
        &middot; kernel {{ info.os.kernel }}
      </p>
    </div>
    <div class="d-flex align-items-center gap-2">
      <span class="text-muted small" ng-cloak>
        Updated <span ng-bind="updatedAt"></span>
      </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>
    </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 info.telemetryAvailable %}
    <div class="alert alert-warning py-2 px-3">
      <i class="fas fa-triangle-exclamation me-1"></i>
      psutil is not importable in the panel virtualenv, so live CPU, memory and
      network figures are unavailable. Historical samples still render.
    </div>
  {% endif %}

  <!-- live gauges -->
  <div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
      <div class="cp-stat">
        <div class="cp-stat__label">CPU</div>
        <div class="cp-stat__value" ng-cloak><span ng-bind="current.cpu.percent | number:1"></span>%</div>
        <div class="cp-stat__meta">{{ info.cpu.cores }} threads &middot; load {{ info.load.one }}</div>
        <div class="cp-meter"><div class="cp-meter__fill" ng-class="tone(current.cpu.percent)"
             ng-style="{width: bar(current.cpu.percent)}"></div></div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="cp-stat">
        <div class="cp-stat__label">Memory</div>
        <div class="cp-stat__value" ng-cloak><span ng-bind="current.memory.percent | number:1"></span>%</div>
        <div class="cp-stat__meta" ng-cloak>
          <span ng-bind="current.memory.usedHuman"></span> of
          <span ng-bind="current.memory.totalHuman"></span>
        </div>
        <div class="cp-meter"><div class="cp-meter__fill" ng-class="tone(current.memory.percent)"
             ng-style="{width: bar(current.memory.percent)}"></div></div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="cp-stat">
        <div class="cp-stat__label">Disk (/)</div>
        <div class="cp-stat__value" ng-cloak><span ng-bind="current.disk.percent | number:1"></span>%</div>
        <div class="cp-stat__meta" ng-cloak>
          <span ng-bind="current.disk.freeHuman"></span> free
        </div>
        <div class="cp-meter"><div class="cp-meter__fill" ng-class="tone(current.disk.percent)"
             ng-style="{width: bar(current.disk.percent)}"></div></div>
      </div>
    </div>
    <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.15rem" ng-cloak
             ng-bind="current.uptime.human"></div>
        <div class="cp-stat__meta">Swap {{ info.memory.swapUsedHuman }} / {{ info.memory.swapTotalHuman }}</div>
      </div>
    </div>
  </div>

  <div class="row g-3">
    <!-- chart -->
    <div class="col-12 col-xl-8">
      <div class="card h-100">
        <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
          <span class="fw-semibold">Resource history</span>
          <div class="btn-group btn-group-sm" role="group" aria-label="History window">
            <button type="button" class="btn"
                    ng-repeat="w in windows"
                    ng-class="minutes === w.value ? 'btn-primary' : 'btn-outline-secondary'"
                    ng-click="setWindow(w.value)" ng-bind="w.label"></button>
          </div>
        </div>
        <div class="card-body">
          <div class="cp-chart-wrap"><canvas id="cpOverviewChart"></canvas></div>
          <p class="text-muted small mb-0 mt-3" ng-show="!series.length" ng-cloak>
            <i class="fas fa-circle-info me-1"></i>
            No samples yet for this window. The monitoring task writes one row a
            minute; the chart fills in as they arrive.
          </p>
        </div>
      </div>
    </div>

    <!-- services -->
    <div class="col-12 col-xl-4">
      <div class="card h-100">
        <div class="card-header d-flex align-items-center justify-content-between">
          <span class="fw-semibold">Services</span>
          <a href="/serverstatus/services" class="btn btn-sm btn-outline-secondary">Manage</a>
        </div>
        <div class="list-group list-group-flush" ng-cloak>
          <div class="list-group-item d-flex align-items-center justify-content-between"
               ng-repeat="svc in services">
            <span class="d-flex align-items-center gap-2">
              <span class="cp-dot" ng-class="svc.running ? 'is-up' : 'is-down'"></span>
              <span ng-bind="svc.label"></span>
            </span>
            <span class="badge" ng-class="svc.running ? 'text-bg-success' : 'text-bg-secondary'"
                  ng-bind="svc.status"></span>
          </div>
          <div class="list-group-item text-muted small" ng-show="!services.length">
            Loading services…
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- host facts -->
  <div class="card mt-3">
    <div class="card-header fw-semibold">Host</div>
    <div class="card-body">
      <div class="row g-3 cp-kv">
        <div class="col-6 col-lg-3"><div class="text-muted small">Hostname</div>{{ info.panel.hostname }}</div>
        <div class="col-6 col-lg-3"><div class="text-muted small">Panel address</div>{{ info.panel.ip }}</div>
        <div class="col-6 col-lg-3"><div class="text-muted small">CPU</div>{{ info.cpu.model }}</div>
        <div class="col-6 col-lg-3"><div class="text-muted small">OpenLiteSpeed</div>
          {{ litespeedVersion|default:"not detected" }}</div>
        <div class="col-6 col-lg-3"><div class="text-muted small">Booted</div>{{ info.uptime.bootTimeISO }}</div>
        <div class="col-6 col-lg-3"><div class="text-muted small">Time zone</div>{{ info.time.timeZone }}</div>
        <div class="col-6 col-lg-3"><div class="text-muted small">Load 1/5/15</div>
          {{ info.load.one }} / {{ info.load.five }} / {{ info.load.fifteen }}</div>
        <div class="col-6 col-lg-3"><div class="text-muted small">Network total</div>
          &darr; {{ info.network.receivedHuman }} &nbsp; &uarr; {{ info.network.sentHuman }}</div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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