{% extends "admin/layout.html" %}
{% block admin_title %}Procesy{% endblock %}
{% block admin_h1 %} Procesy{% endblock %}
{% block admin_sub %}Lista posortowana wg CPU (top 200){% endblock %}
{% block admin_head %}
<style>
.proc-filter { margin-bottom:0.8rem; display:flex; gap:0.5rem; flex-wrap:wrap; }
.proc-filter input { flex:1; min-width:200px; }
.proc-table { width:100%; font-size:0.78rem; border-collapse:collapse; }
.proc-table th { position:sticky; top:0; background:#161b22; padding:0.35rem 0.4rem; text-align:left;
 border-bottom:2px solid var(--border); color:var(--muted); font-weight:600; }
.proc-table td { padding:0.25rem 0.4rem; border-bottom:1px solid #111; white-space:nowrap; }
.proc-table td.arg { max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proc-table tr:hover { background:#111; }
</style>
{% endblock %}
{% block admin_content %}
<div class="proc-filter">
 <input id="proc-q" placeholder="Szukaj po nazwie/argumentach..." onkeydown="if(event.key==='Enter')loadProcs()">
 <button class="btn btn-sm" onclick="loadProcs()"> Szukaj</button>
 <button class="btn btn-sm" onclick="document.getElementById('proc-q').value='';loadProcs()"> Wyczyść</button>
</div>
<div id="proc-count" class="dim" style="margin-bottom:0.5rem"></div>
<table class="proc-table"><thead><tr>
 <th>PID</th><th>PPID</th><th>User</th><th>%CPU</th><th>%MEM</th><th>Czas</th><th>Polecenie</th><th></th>
</tr></thead><tbody id="proc-tbody"></tbody></table>
<script>
async function loadProcs(){
 const q=document.getElementById('proc-q').value.trim();
 const tb=document.getElementById('proc-tbody');
 try{
 const r=await fetch('/admin/processes/api'+(q?'?q='+encodeURIComponent(q):''));
 const d=await r.json();
 document.getElementById('proc-count').textContent = `Pokazano ${d.count} procesów${d.q?' dla "'+d.q+'"':''}`;
 let html='';
 d.processes.forEach(p=>{
 html+=`<tr><td>${p.pid}</td><td>${p.ppid}</td><td>${p.user}</td><td>${p.cpu}</td>
 <td>${p.mem}</td><td>${p.time}</td><td class="arg" title="${p.args.replace(/"/g,'&quot;')}">${p.comm}</td>
 <td><button class="svc-btn" style="color:#f85149" onclick="kill(${p.pid})"> kill</button></td></tr>`;
 });
 tb.innerHTML=html||'<tr><td colspan="8" class="dim">brak procesów</td></tr>';
 }catch(e){ tb.innerHTML='<tr><td colspan="8">błąd: '+e+'</td></tr>'; }
}
async function kill(pid){
 if(!confirm('Zabić proces '+pid+'?'))return;
 const fd=new FormData(); fd.append('pid',pid);
 const r=await fetch('/admin/processes/kill',{method:'POST',body:fd,headers:{'X-CSRF-Token':CSRF_TOKEN}});
 const d=await r.json();
 alert(d.ok?'Zabito '+pid:(d.error||'błąd'));
 loadProcs();
}
loadProcs(); setInterval(()=>{ if(!document.getElementById('proc-q').value) loadProcs(); }, 5000);
</script>
{% endblock %}