{% extends "base.html" %}{% block title %}{{service.name}}{% endblock %}{% block body %}
<div class="head"><div><small>SERVICE / {{service.category|upper}}</small><h1>{{service.name}}</h1><p>{{service.description}}</p></div><div class="action-row"><a class="soft" href="/admin/services">← Services</a>{% if not service.installed %}<a class="btn" href="/admin/store">Install from App Store</a>{% endif %}</div></div>
<section class="card"><div class="service-hero"><div><span class="tag">{{service.category}}</span><h2>{{service.version or 'Version unavailable'}}</h2><span class="{{'ok' if service.running else 'muted'}}">● {{'Running' if service.running else 'Stopped'}}</span> {% if service.enabled %}<span class="tag">Enabled</span>{% endif %}</div><div class="action-row"><button class="soft" data-op="start">Start</button><button class="soft" data-op="stop">Stop</button><button class="soft" data-op="restart">Restart</button><button class="soft" data-op="reload">Reload</button></div></div></section>
<div class="tabbar"><button class="active" data-tab="service">Service</button>{% if is_php %}<button data-tab="runtime">PHP Runtime</button><button data-tab="limits">PHP Limits</button><button data-tab="fpm">FPM Profile</button>{% endif %}<button data-tab="config">Configuration</button><button data-tab="logs">Logs</button><button data-tab="health">Health</button></div>
<section class="tab-panel active" data-panel="service"><div class="grid2"><div class="card"><h2>Service controls</h2><div class="action-row"><button class="soft" data-op="enable">Enable at boot</button><button class="soft" data-op="disable">Disable at boot</button></div><div class="info" style="margin-top:16px"><div><small>Unit</small><b>{{service.service or '—'}}</b></div><div><small>Installed</small><b>{{'Yes' if service.installed else 'No'}}</b></div></div></div><div class="card"><h2>Application details</h2><div class="info"><div><small>Packages</small><b>{{service.packages|join(', ') or '—'}}</b></div><div><small>Health</small><b>{{'Healthy' if service.health else 'Needs attention'}}</b></div></div></div></div></section>
{% if is_php %}<section class="tab-panel" data-panel="runtime"><div class="card"><h2>PHP Runtime</h2><div class="formgrid"><label>PHP version<input value="{{service.version}}" readonly></label><label>Package<input value="{{service.packages|join(', ')}}" readonly></label></div><p class="muted">Manage PHP runtime settings, extensions and FPM pool tuning from the dedicated tabs.</p><button class="soft" id="phpinfo-btn">Runtime diagnostics</button><pre id="phpinfo" class="logbox" hidden></pre></div></section>
<section class="tab-panel" data-panel="limits"><div class="card"><div class="cardhead"><div><small>PHP.INI</small><h2>Execution & upload limits</h2></div></div><div class="formgrid"><label>memory_limit<input data-phpini="memory_limit" value="1024M"></label><label>max_execution_time<input data-phpini="max_execution_time" value="3000"></label><label>max_input_time<input data-phpini="max_input_time" value="600"></label><label>post_max_size<input data-phpini="post_max_size" value="1024M"></label><label>upload_max_filesize<input data-phpini="upload_max_filesize" value="1024M"></label><label>max_file_uploads<input data-phpini="max_file_uploads" value="20"></label><label>display_errors<select data-phpini="display_errors"><option>On</option><option>Off</option></select></label><label>date.timezone<input data-phpini="date.timezone" value="UTC"></label></div><button class="btn" id="save-limits">Validate & Save PHP settings</button></div></section>
<section class="tab-panel" data-panel="fpm"><div class="card"><div class="cardhead"><div><small>PHP-FPM</small><h2>Pool profile</h2></div></div><div class="formgrid"><label>Process mode<select><option>dynamic</option><option>static</option><option>ondemand</option></select></label><label>max_children<input value="80"></label><label>start_servers<input value="10"></label><label>min_spare_servers<input value="10"></label><label>max_spare_servers<input value="30"></label><label>request_terminate_timeout<input value="100"></label></div><button class="btn" id="save-fpm">Validate & Save FPM profile</button></div></section>{% endif %}
<section class="tab-panel" data-panel="config"><div class="card"><div class="cardhead"><div><small>SOFTWARE CONFIGURATION</small><h2>Configuration file</h2></div><span class="tag" id="config-path">Loading…</span></div><textarea id="config-text" class="code-editor"></textarea><div class="action-row"><button class="btn" id="save-config">Syntax validate → Save → Reload</button></div></div></section>
<section class="tab-panel" data-panel="logs"><div class="card"><div class="cardhead"><h2>Recent logs</h2><button class="soft" id="refresh-logs">Refresh</button></div><pre id="logs" class="logbox">Loading…</pre></div></section>
<section class="tab-panel" data-panel="health"><div class="card"><h2>Health</h2><div id="health-box" class="info">Checking…</div></div></section>
<script>
const KEY={{service.key|tojson}},CSRF={{csrf_token|tojson}};
async function api(op){const r=await fetch('/api/services/'+encodeURIComponent(KEY)+'/action',{method:'POST',headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},body:JSON.stringify({operation:op})});return r.json()}
async function loadConfig(){const j=await fetch('/api/services/'+encodeURIComponent(KEY)+'/config').then(r=>r.json());document.getElementById('config-path').textContent=j.path||'No editable configuration';document.getElementById('config-text').value=j.content||'';document.getElementById('config-text').disabled=!j.editable}
async function loadLogs(){const j=await api('logs');document.getElementById('logs').textContent=j.result?.log||j.error||'No logs.'}
async function loadHealth(){const j=await api('health');const x=j.result||{};document.getElementById('health-box').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>'}
document.querySelectorAll('[data-tab]').forEach(b=>b.onclick=()=>{document.querySelectorAll('[data-tab]').forEach(x=>x.classList.remove('active'));document.querySelectorAll('.tab-panel').forEach(x=>x.classList.remove('active'));b.classList.add('active');document.querySelector('[data-panel="'+b.dataset.tab+'"]')?.classList.add('active');if(b.dataset.tab==='config')loadConfig();if(b.dataset.tab==='logs')loadLogs();if(b.dataset.tab==='health')loadHealth()});
document.querySelectorAll('[data-op]').forEach(b=>b.onclick=async()=>{b.disabled=true;const j=await api(b.dataset.op);b.disabled=false;if(!j.ok)toast(j.error,'error');else{toast(j.result?.message||'Completed');setTimeout(()=>location.reload(),500)}});
document.getElementById('save-config').onclick=async()=>{const b=document.getElementById('save-config');b.disabled=true;const r=await fetch('/api/services/'+encodeURIComponent(KEY)+'/config',{method:'POST',headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},body:JSON.stringify({content:document.getElementById('config-text').value})});const j=await r.json();b.disabled=false;if(!j.ok)toast(j.error,'error');else toast(j.message||'Saved and reloaded')};document.getElementById('refresh-logs').onclick=loadLogs;
const pi=document.getElementById('phpinfo-btn');if(pi)pi.onclick=async()=>{const j=await api('version');const x=document.getElementById('phpinfo');x.hidden=false;x.textContent='PHP runtime: '+(j.result?.version||'unknown')+'\nConfiguration is managed through PHP Limits, FPM Profile and Configuration tabs.'};
const lim=document.getElementById('save-limits');if(lim)lim.onclick=async()=>{const settings={};document.querySelectorAll('[data-phpini]').forEach(e=>settings[e.dataset.phpini]=e.value);lim.disabled=true;const r=await fetch('/api/services/'+encodeURIComponent(KEY)+'/php-settings',{method:'POST',headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},body:JSON.stringify({settings})});const j=await r.json();lim.disabled=false;if(!j.ok)toast(j.error,'error');else toast(j.message||'PHP settings saved')};
const fpm=document.getElementById('save-fpm');if(fpm)fpm.onclick=async()=>{const settings={};document.querySelectorAll('[data-fpm]').forEach(e=>settings[e.dataset.fpm]=e.value);fpm.disabled=true;const r=await fetch('/api/services/'+encodeURIComponent(KEY)+'/fpm-settings',{method:'POST',headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},body:JSON.stringify({settings})});const j=await r.json();fpm.disabled=false;if(!j.ok)toast(j.error,'error');else toast(j.message||'FPM profile saved')};
</script>{% endblock %}