{% extends "admin/layout.html" %}
{% block admin_title %}Dashboard{% endblock %}
{% block admin_h1 %} Dashboard VPS{% endblock %}
{% block admin_sub %}{{ hostname or 'PaganOS' }} — podgląd na żywo (odświeżanie co 5 s){% endblock %}
{% block admin_head %}
<style>
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.8rem; }
.d-card { background:var(--bg-card,#0d1117); border:1px solid var(--border,#30363d);
 border-radius:var(--radius); padding:0.9rem 1rem; }
.d-card.lbl { font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.d-card.big { font-size:1.6rem; font-weight:700; margin-top:0.2rem; }
.d-card.sub { font-size:0.78rem; color:var(--muted); margin-top:0.15rem; }
.bar { height:6px; border-radius:3px; background:#21262d; margin-top:0.4rem; overflow:hidden; }
.bar > div { height:100%; background:var(--accent,#58a6ff); border-radius:3px; }
.bar.warn > div { background:#d29922; }
.bar.err > div { background:#f85149; }
</style>
{% endblock %}
{% block admin_content %}
<div class="adm-tools" style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem">
 <button class="btn btn-sm" id="ps-run" onclick="psToggle('start')">▶ Start pagsync</button>
 <button class="btn btn-sm" id="ps-stop" onclick="psToggle('stop')">⏹ Stop pagsync</button>
 <a class="btn btn-sm" href="/build/dashboard"> Panel buildów</a>
 <a class="btn btn-sm" href="/admin/services"> Usługi</a>
 <a class="btn btn-sm" href="/admin/processes"> Procesy</a>
 <a class="btn btn-sm" href="/admin/disk"> Dysk</a>
 <a class="btn btn-sm" href="/admin/logs"> Logi</a>
 <a class="btn btn-sm" href="/admin/terminal"> Terminal</a>
 <span class="term-status" id="ps-status" style="align-self:center;color:var(--muted);font-size:0.8rem"></span>
</div>
<div class="dash-grid" id="dash"></div>
<script>
async function psToggle(a){
 const st=document.getElementById('ps-status'); st.textContent='⏳ ...';
 try{
 const r=await fetch('/admin/pagsync/'+a,{method:'POST',headers:{'X-CSRF-Token':CSRF_TOKEN,'X-Requested-With':'fetch'}});
 const d=await r.json();
 st.textContent = d.ok? (a==='start'?'▶ uruchomiono pagsync':'⏹ zatrzymano'): (d.error||'błąd');
 }catch(e){ st.textContent='błąd: '+e; }
 setTimeout(()=>st.textContent='', 4000);
}
const bar = (pct, cls) => `<div class="bar ${cls}"><div style="width:${Math.min(pct,100)}%"></div></div>`;
const card = (lbl, big, sub, body) => `<div class="d-card"><div class="lbl">${lbl}</div>
 <div class="big">${big}</div>${sub?`<div class="sub">${sub}</div>`:''}${body||''}</div>`;
async function loadDash() {
 try {
 const r = await fetch('/admin/vps/stats'); const s = await r.json();
 const cpuCls = s.cpu_pct>85?'err':s.cpu_pct>60?'warn':'';
 const ramCls = s.ram_pct>85?'err':s.ram_pct>60?'warn':'';
 const dkCls = s.disk_pct>85?'err':s.disk_pct>75?'warn':'';
 document.getElementById('dash').innerHTML =
 card('Serwer', s.hostname, `${s.os} · ${s.arch}`) +
 card('Uptime', s.uptime, `procesy: ${s.procs}`) +
 card('CPU', `${s.cpu_pct}%`, `${s.cpu_cores} rdzeni`, bar(s.cpu_pct, cpuCls)) +
 card('RAM', `${(s.ram_used/1024).toFixed(1)} GB`, `z ${(s.ram_total/1024).toFixed(1)} GB (${s.ram_pct}%)`, bar(s.ram_pct, ramCls)) +
 card('SWAP', `${(s.swap_used/1024).toFixed(1)} GB`, `z ${(s.swap_total/1024).toFixed(1)} GB`) +
 card('Dysk /', `${s.disk_used} GB`, `z ${s.disk_total} GB · wolne ${s.disk_free} GB (${s.disk_pct}%)`, bar(s.disk_pct, dkCls)) +
 card('Load', s.load.join(' / '), 'średnia 1/5/15 min') +
 card('Czas', s.time, 'UTC');
 } catch (e) { /* retry */ }
}
loadDash(); setInterval(loadDash, 5000);
</script>
{% endblock %}