{% extends "baseTemplate/index.html" %}
{% load static %}
{# CPU and memory detail, with the per-core bars and the history chart. #}

{% block title %}CPU & RAM{% 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:.72rem; letter-spacing:.04em; text-transform:uppercase;
                    color:var(--cp-neutral); margin-bottom:.3rem; }
  .cp-stat__value { font-size:1.6rem; font-weight:600; line-height:1.1; }
  .cp-meter       { height:6px; border-radius:var(--cp-radius-pill);
                    background:var(--cp-border); overflow:hidden; margin-top:.5rem; }
  .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-core        { display:flex; align-items:center; gap:.6rem; margin-bottom:.45rem; }
  .cp-core__id    { font-family:var(--cp-font-mono); font-size:.72rem;
                    color:var(--cp-neutral); min-width:3rem; }
  .cp-core__val   { font-family:var(--cp-font-mono); font-size:.72rem; min-width:3rem;
                    text-align:right; }
  .cp-mono        { font-family:var(--cp-font-mono); font-size:.8rem; }
  .cp-chart-wrap  { position:relative; height:280px; }
</style>
{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">CPU &amp; memory</h1>
      <p class="text-muted mb-0 small">
        {{ cpuModel }} &middot; {{ cores }} threads{% if physicalCores %} on {{ physicalCores }} cores{% endif %}
      </p>
    </div>
    <div class="d-flex align-items-center gap-2">
      <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 class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="cpLive" ng-model="live">
        <label class="form-check-label small" for="cpLive">Live</label>
      </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-warning py-2 px-3" ng-show="telemetryAvailable === false" ng-cloak>
    <i class="fas fa-triangle-exclamation me-1"></i>
    psutil is not available in the panel virtualenv, so live sampling is disabled.
  </div>

  <div class="row g-3 mb-3">
    <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="cpu.percent | number:1"></span>%</div>
        <div class="cp-meter"><div class="cp-meter__fill" ng-class="tone(cpu.percent)"
             ng-style="{width: bar(cpu.percent)}"></div></div>
        <div class="small text-muted mt-2" ng-cloak>
          <span ng-bind="cpu.frequencyMHz | number:0"></span> MHz
        </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="memory.percent | number:1"></span>%</div>
        <div class="cp-meter"><div class="cp-meter__fill" ng-class="tone(memory.percent)"
             ng-style="{width: bar(memory.percent)}"></div></div>
        <div class="small text-muted mt-2" ng-cloak>
          <span ng-bind="memory.usedHuman"></span> of <span ng-bind="memory.totalHuman"></span>
        </div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="cp-stat">
        <div class="cp-stat__label">Swap</div>
        <div class="cp-stat__value" ng-cloak><span ng-bind="memory.swapPercent | number:1"></span>%</div>
        <div class="cp-meter"><div class="cp-meter__fill" ng-class="tone(memory.swapPercent)"
             ng-style="{width: bar(memory.swapPercent)}"></div></div>
        <div class="small text-muted mt-2" ng-cloak>
          <span ng-bind="memory.swapUsedHuman"></span> of <span ng-bind="memory.swapTotalHuman"></span>
        </div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="cp-stat">
        <div class="cp-stat__label">Load average</div>
        <div class="cp-stat__value" style="font-size:1.25rem" ng-cloak>
          <span ng-bind="load.one"></span> / <span ng-bind="load.five"></span> /
          <span ng-bind="load.fifteen"></span>
        </div>
        <div class="small text-muted mt-2" ng-cloak>
          <span ng-bind="load.onePerCore"></span> per core &middot; up
          <span ng-bind="uptime.human"></span>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3">
    <div class="col-12 col-xl-8">
      <div class="card h-100">
        <div class="card-header fw-semibold">CPU, memory and swap history</div>
        <div class="card-body">
          <div class="cp-chart-wrap"><canvas id="cpCpuRamChart"></canvas></div>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-4">
      <div class="card h-100">
        <div class="card-header fw-semibold">Per-core utilisation</div>
        <div class="card-body" ng-cloak>
          <div class="cp-core" ng-repeat="value in cpu.perCore track by $index">
            <span class="cp-core__id">cpu<span ng-bind="$index"></span></span>
            <span class="cp-meter flex-grow-1 mt-0">
              <span class="cp-meter__fill d-block" ng-class="tone(value)"
                    ng-style="{width: bar(value)}"></span>
            </span>
            <span class="cp-core__val"><span ng-bind="value | number:0"></span>%</span>
          </div>
          <p class="text-muted small mb-0" ng-show="!cpu.perCore.length">
            Per-core figures are unavailable.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-header d-flex align-items-center justify-content-between">
      <span class="fw-semibold">Top processes</span>
      <div class="btn-group btn-group-sm" role="group" aria-label="Sort processes">
        <button type="button" class="btn"
                ng-class="sortBy === 'cpu' ? 'btn-primary' : 'btn-outline-secondary'"
                ng-click="setSort('cpu')">By CPU</button>
        <button type="button" class="btn"
                ng-class="sortBy === 'memory' ? 'btn-primary' : 'btn-outline-secondary'"
                ng-click="setSort('memory')">By memory</button>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-sm table-hover align-middle mb-0">
        <thead>
          <tr>
            <th scope="col">PID</th><th scope="col">Process</th><th scope="col">User</th>
            <th scope="col" class="text-end">CPU %</th><th scope="col" class="text-end">Memory</th>
          </tr>
        </thead>
        <tbody ng-cloak>
          <tr ng-repeat="proc in processes">
            <td class="cp-mono" ng-bind="proc.pid"></td>
            <td ng-bind="proc.name"></td>
            <td class="text-muted small" ng-bind="proc.user"></td>
            <td class="text-end" ng-bind="proc.cpu_percent"></td>
            <td class="text-end">
              <span ng-bind="proc.rssHuman"></span>
              <span class="text-muted small">(<span ng-bind="proc.memory_percent"></span>%)</span>
            </td>
          </tr>
          <tr ng-show="!processes.length">
            <td colspan="5" class="text-muted text-center py-3">No process data available.</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

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