{% extends "base.html" %}{% block title %}Service Manager{% endblock %}{% block body %}
<div class="head"><div><small>SERVER / SERVICES</small><h1>Service Manager</h1><p>Dynamic system inventory, real controls and safe software configuration.</p></div><div class="action-row"><button class="soft" id="svc-refresh">↻ Refresh</button><a class="btn" href="/admin/store">Install Service / App</a></div></div>
<section class="card"><div class="cardhead"><div class="service-tabs"><button class="active" data-cat="all">All</button><button data-cat="Web Server">Web</button><button data-cat="Runtime">Runtime</button><button data-cat="Database">Database</button><button data-cat="Mail">Mail</button><button data-cat="DNS">DNS</button><button data-cat="Firewall">Firewall</button><button data-cat="System Service">System</button></div><input class="search" id="svc-search" placeholder="Search service…"></div><div class="servicegrid" id="service-grid">{% for s in services %}<article class="card service-card" data-cat="{{s.category}}" data-name="{{s.name|lower}}"><div class="service-top"><div class="service-name"><span class="service-icon">⚙</span><div><h3><a href="/admin/services/{{s.key}}">{{s.name}}</a></h3><div class="service-meta"><span class="tag">{{s.category}}</span><span class="{{'ok' if s.running else 'muted' if s.installed else 'bad'}}">● {{'Running' if s.running else 'Stopped' if s.installed else 'Not installed'}}</span></div></div></div>{% if s.dynamic %}<span class="tag">Dynamic</span>{% endif %}</div><p class="muted">{{s.description}}</p><div class="service-meta"><span>{{s.version or 'Version unavailable'}}</span>{% if s.service %}<span>unit: {{s.service}}</span>{% endif %}</div><div class="action-row service-actions">{% if s.service %}<button class="soft" data-service="{{s.key}}" data-op="start">Start</button><button class="soft" data-service="{{s.key}}" data-op="stop">Stop</button><button class="soft" data-service="{{s.key}}" data-op="restart">Restart</button><button class="soft" data-service="{{s.key}}" data-op="reload">Reload</button><button class="soft" data-service="{{s.key}}" data-op="enable">Enable</button><button class="soft" data-service="{{s.key}}" data-op="disable">Disable</button>{% endif %}<button class="soft" data-health="{{s.key}}">Health</button><button class="soft" data-logs="{{s.key}}">Logs</button>{% if s.configurable %}<a class="btn" href="/admin/services/{{s.key}}#config">Config</a>{% endif %}<a class="soft" href="/admin/services/{{s.key}}">Manage</a></div></article>{% endfor %}</div></section>
<div class="modal-backdrop" id="svc-modal" hidden><div class="modal-card task-modal"><button class="modal-close" type="button" data-close-svc aria-label="Close" onclick="closeModal('svc-modal')">×</button><small id="svc-caption">SERVICE</small><h2 id="svc-title">Service details</h2><p class="sub" id="svc-path"></p><textarea id="svc-content" style="width:100%;min-height:350px;font:12px/1.55 ui-monospace,monospace" hidden></textarea><pre id="svc-log" class="logbox" hidden></pre><div id="svc-health" class="info" style="grid-template-columns:repeat(3,1fr)" hidden></div><div class="action-row" id="svc-modal-actions"><button class="btn" id="svc-save" hidden>Validate & Save → Reload</button></div></div></div>
<script>
const SCSRF='{{csrf_token}}',sm=document.getElementById('svc-modal'),sc=document.getElementById('svc-content'),sl=document.getElementById('svc-log'),sh=document.getElementById('svc-health'),ss=document.getElementById('svc-save');let svcKey='';
function resetModal(){sc.hidden=true;sl.hidden=true;sh.hidden=true;ss.hidden=true;document.getElementById('svc-path').textContent='';document.getElementById('svc-modal-actions').classList.remove('busy')}
async function serviceAction(key,op){const r=await fetch('/api/services/'+key+'/action',{method:'POST',headers:{'Content-Type':'application/json','X-CSRFToken':SCSRF},body:JSON.stringify({operation:op})});return r.json()}
document.addEventListener('click',async e=>{const b=e.target.closest('[data-service]');if(b){b.disabled=true;const j=await serviceAction(b.dataset.service,b.dataset.op);b.disabled=false;if(!j.ok)toast(j.error,'error');else{toast(j.result?.message||b.dataset.op+' completed');setTimeout(()=>location.reload(),450)}}
const c=e.target.closest('[data-config]');if(c){svcKey=c.dataset.config;resetModal();document.getElementById('svc-caption').textContent='CONFIGURATION';openModal('svc-modal');const j=await fetch('/api/services/'+svcKey+'/config').then(r=>r.json());document.getElementById('svc-title').textContent=j.path||svcKey;document.getElementById('svc-path').textContent=j.editable?'Edit carefully. Save runs syntax validation before reload.':'Read-only configuration';sc.value=j.content||'';sc.hidden=false;sc.disabled=!j.editable;ss.hidden=!j.editable}
const l=e.target.closest('[data-logs]');if(l){svcKey=l.dataset.logs;resetModal();document.getElementById('svc-caption').textContent='SERVICE LOGS';openModal('svc-modal');document.getElementById('svc-title').textContent='Recent logs';sl.hidden=false;sl.textContent='Loading…';const j=await serviceAction(svcKey,'logs');sl.textContent=j.result?.log||j.error||'No logs.'}
const h=e.target.closest('[data-health]');if(h){svcKey=h.dataset.health;resetModal();document.getElementById('svc-caption').textContent='HEALTH CHECK';openModal('svc-modal');document.getElementById('svc-title').textContent='Service health';sh.hidden=false;const j=await serviceAction(svcKey,'health');const x=j.result||{};sh.innerHTML='<div><small>Installed</small><b>'+((x.installed)?'Yes':'No')+'</b></div><div><small>Running</small><b>'+((x.running)?'Yes':'No')+'</b></div><div><small>Healthy</small><b>'+((x.healthy)?'Healthy':'Needs attention')+'</b></div>'}
if(e.target.closest('[data-close-svc]'))closeModal('svc-modal')});
ss.onclick=async()=>{ss.disabled=true;const r=await fetch('/api/services/'+svcKey+'/config',{method:'POST',headers:{'Content-Type':'application/json','X-CSRFToken':SCSRF},body:JSON.stringify({content:sc.value})});const j=await r.json();ss.disabled=false;if(!j.ok)toast(j.error,'error');else{toast(j.message||'Configuration saved');closeModal('svc-modal');setTimeout(()=>location.reload(),500)}};
document.getElementById('svc-refresh').onclick=()=>location.reload();
const search=document.getElementById('svc-search');let cat='all';document.querySelectorAll('[data-cat]').forEach(b=>b.addEventListener('click',()=>{cat=b.dataset.cat;document.querySelectorAll('[data-cat]').forEach(x=>x.classList.remove('active'));b.classList.add('active');filter()}));search.addEventListener('input',filter);function filter(){const q=search.value.toLowerCase();document.querySelectorAll('#service-grid [data-cat]').forEach(x=>{x.hidden=!((cat==='all'||x.dataset.cat===cat)&&x.dataset.name.includes(q))})}
</script>{% endblock %}