{{define "status-body"}}<div class="page" data-module="status" data-agent="{{.Agent.ID}}" data-relay-up-ms="{{.RelayUpMs}}">
<style>
  .meters { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; margin-bottom:20px; }
  .meters .card { margin:0; }
  .meter .head { display:flex; align-items:baseline; justify-content:space-between; }
  .meter .name { color:var(--muted); font-size:13px; }
  .meter .val { font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; }
  .meter .sub { color:var(--muted); font-size:13px; margin-top:8px; min-height:20px; font-variant-numeric:tabular-nums; }
  .bar { height:8px; border-radius:4px; background:#0c0f13; border:1px solid var(--border); overflow:hidden; margin-top:10px; }
  .bar i { display:block; height:100%; width:100%; background:var(--accent); transform-origin:left; transform:scaleX(0); transition:transform .4s; }
  .bar i.warn { background:#e6a23c; }
  .bar i.crit { background:var(--danger); }
  .speed { display:flex; gap:28px; flex-wrap:wrap; margin-top:16px; }
  .speed b { display:block; font-size:20px; font-variant-numeric:tabular-nums; }
  .speed span { color:var(--muted); font-size:13px; }
  .live { display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:20px; }
  .gauge { position:relative; width:240px; flex:none; }
  .gauge svg { display:block; width:100%; }
  .gauge path { fill:none; stroke-width:14; stroke-linecap:round; }
  .gauge .track { stroke:#0c0f13; }
  .gauge .fill { stroke:var(--accent); stroke-dasharray:251.4; stroke-dashoffset:251.4; transition:stroke-dashoffset .25s linear, stroke .3s; }
  .gauge .num { position:absolute; left:0; right:0; bottom:26px; text-align:center; font-size:38px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
  .gauge .unit { position:absolute; left:0; right:0; bottom:4px; text-align:center; color:var(--muted); font-size:13px; }
  .live .side { flex:1; min-width:220px; }
  .live .phase { font-size:15px; margin-bottom:8px; }
  .live .phase i { font-style:normal; color:var(--accent); margin-right:6px; }
  .live.up .phase i { color:var(--ok); }
  .live.up .gauge .fill { stroke:var(--ok); }
  .spark { display:block; width:100%; height:64px; }
  .spark polyline { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
  .spark polygon { fill:var(--accent); opacity:.15; }
  .live.up .spark polyline { stroke:var(--ok); }
  .live.up .spark polygon { fill:var(--ok); }
  label.check { display:inline-flex; align-items:center; gap:8px; margin:0; color:var(--text); font-size:14px; cursor:pointer; }
</style>
<div class="wrap">
  <h1>Статус</h1>
  <div class="err" id="err" hidden></div>

  <div class="meters">
    <div class="card meter">
      <div class="head"><span class="name">Процессор</span><span class="val" id="cpu-val">-</span></div>
      <div class="bar"><i id="cpu-bar"></i></div>
      <div class="sub" id="cpu-sub"></div>
    </div>
    <div class="card meter">
      <div class="head"><span class="name">Оперативная память</span><span class="val" id="mem-val">-</span></div>
      <div class="bar"><i id="mem-bar"></i></div>
      <div class="sub" id="mem-sub"></div>
    </div>
    <div class="card meter">
      <div class="head"><span class="name">Диск (/)</span><span class="val" id="disk-val">-</span></div>
      <div class="bar"><i id="disk-bar"></i></div>
      <div class="sub" id="disk-sub"></div>
    </div>
  </div>

  <div class="card">
    <h2>Скорость соединения</h2>
    <p class="muted">Клиент замеряет свой канал до хоста панели - тот же, по которому идут терминал, файлы и http-проброс.
      С галочкой «До браузера» данные идут дальше, через панель до этого браузера и обратно: так виден весь путь клиент - панель - браузер.
      Замер занимает около 15 секунд, не дольше 40, и на это время нагружает канал.</p>
    <div class="row">
      <button id="speed-btn" type="button">Замерить скорость</button>
      <label class="check" title="Данные пойдут не только между клиентом и хостом панели, а через панель до этого браузера и обратно">
        <input type="checkbox" id="speed-relay"> До браузера
      </label>
      <span class="muted" id="speed-note"></span>
    </div>
    <div class="live" id="live" hidden>
      <div class="gauge">
        <svg viewBox="0 0 200 110">
          <path class="track" d="M20 100 A80 80 0 0 1 180 100"/>
          <path class="fill" id="lv-arc" d="M20 100 A80 80 0 0 1 180 100"/>
        </svg>
        <div class="num" id="lv-num">-</div>
        <div class="unit" id="lv-unit"></div>
      </div>
      <div class="side">
        <div class="phase"><i id="lv-ico"></i><span id="lv-phase"></span></div>
        <svg class="spark" viewBox="0 0 100 100" preserveAspectRatio="none">
          <polygon id="lv-area" points=""/>
          <polyline id="lv-line" points=""/>
        </svg>
      </div>
    </div>
    <div class="speed" id="speed" hidden>
      <div><b id="sp-ping"></b><span>задержка</span></div>
      <div><b id="sp-down"></b><span id="sp-down-lbl"></span></div>
      <div><b id="sp-up"></b><span id="sp-up-lbl"></span></div>
    </div>
  </div>
</div>
</div>{{end}}