{% extends "base.html" %}
{% block title %}Nginx{% endblock %}
{% block content %}
<h1>[>] Nginx / Subdomains</h1>

<div class="toolbar">
    <button class="btn" onclick="loadSites()">Refresh Sites</button>
    <button class="btn" onclick="reloadNginx()">Reload Nginx</button>
</div>

<div class="grid grid-2">
    <div class="card">
        <div class="card-title">Active Sites</div>
        <div class="output" id="sites-output"><span class="info">Loading...</span></div>
    </div>
    <div>
        <div class="card">
            <div class="card-title">Add Subdomain</div>
            <label>Subdomain (e.g. "api" for api.seteclabs.io)</label>
            <input type="text" id="sub-name" placeholder="subdomain" style="width:100%">
            <label>Type</label>
            <select id="sub-type" onchange="toggleSubFields()">
                <option value="proxy">Reverse Proxy</option>
                <option value="static">Static Files</option>
            </select>
            <div id="proxy-fields">
                <label>Proxy Port</label>
                <input type="number" id="sub-port" placeholder="e.g. 8080" style="width:100%">
            </div>
            <div id="static-fields" style="display:none">
                <label>Document Root</label>
                <input type="text" id="sub-root" placeholder="/var/www/sub.seteclabs.io" style="width:100%">
            </div>
            <br>
            <button class="btn" onclick="addSubdomain()">Create Vhost</button>
        </div>
        <div class="card">
            <div class="card-title">SSL Certificate</div>
            <label>Domain</label>
            <input type="text" id="ssl-domain" placeholder="sub.seteclabs.io" style="width:100%">
            <br><br>
            <button class="btn" onclick="addSSL()">Install SSL (Certbot)</button>
        </div>
        <div class="card">
            <div class="card-title">View Config</div>
            <label>Site name</label>
            <input type="text" id="config-site" placeholder="site filename" style="width:100%">
            <br><br>
            <button class="btn" onclick="viewConfig()">View</button>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-title">Output</div>
    <div class="output" id="output"><span class="info">Ready.</span></div>
</div>
{% endblock %}

{% block scripts %}
<script>
function toggleSubFields() {
    const t = document.getElementById('sub-type').value;
    document.getElementById('proxy-fields').style.display = t === 'proxy' ? '' : 'none';
    document.getElementById('static-fields').style.display = t === 'static' ? '' : 'none';
}

async function loadSites() {
    const res = await apiGet('/api/nginx/sites');
    showResult(res, 'sites-output');
}

async function reloadNginx() {
    const res = await apiPost('/api/nginx/reload');
    showResult(res);
}

async function addSubdomain() {
    const sub = document.getElementById('sub-name').value;
    const type = document.getElementById('sub-type').value;
    if (!sub) { alert('Enter subdomain'); return; }
    const body = {subdomain: sub};
    if (type === 'proxy') body.proxy_port = document.getElementById('sub-port').value;
    else body.static_root = document.getElementById('sub-root').value;
    const res = await apiPost('/api/nginx/add-subdomain', body);
    showResult(res);
    loadSites();
}

async function addSSL() {
    const domain = document.getElementById('ssl-domain').value;
    if (!domain) return;
    document.getElementById('output').innerHTML = '<span class="info">Installing SSL for '+domain+'... (may take a minute)</span>';
    const res = await apiPost('/api/nginx/ssl/'+domain);
    showResult(res);
}

async function viewConfig() {
    const site = document.getElementById('config-site').value;
    if (!site) return;
    const res = await apiGet('/api/nginx/config/'+site);
    showResult(res);
}

loadSites();
</script>
{% endblock %}