{% extends "base.html" %}
{% block title %}Vhosts — nanio-orchestrator{% endblock %}
{% block content %}
<h1>Virtual Hosts &amp; Routes</h1>

<div class="actions">
    <button class="btn btn-primary" onclick="showModal('create-vhost-modal')">+ New Vhost</button>
</div>

{% for vhost in vhosts %}
<div class="card">
    <div class="card-header">
        <h3>{{ vhost.server_name }}</h3>
        <div class="card-badges">
            <span class="badge">:{{ vhost.listen_port }}</span>
            {% if vhost.ssl %}<span class="badge ok">SSL</span>{% endif %}
            {% if vhost.default_pool_type %}<span class="badge type-{{ vhost.default_pool_type }}">{{ vhost.default_pool_type }}</span>{% endif %}
            {% if vhost.enabled %}<span class="badge ok">enabled</span>{% else %}<span class="badge warn">disabled</span>{% endif %}
        </div>
        <div class="card-actions">
            <button class="btn btn-sm" onclick="previewVhost({{ vhost.id }})">Preview</button>
            <button class="btn btn-sm" onclick="showExtraBlocks({{ vhost.id }}, {{ vhost.extra_blocks | tojson }}, {{ vhost.ip_rule_mode | tojson }}, {{ vhost.ip_rule_ips | tojson }})">Additional Configurations</button>
            <button class="btn btn-sm btn-danger" onclick="deleteVhost({{ vhost.id }}, '{{ vhost.server_name }}')">Delete</button>
        </div>
    </div>

    {% if vhost.ssl_cert_path %}
    <p class="meta">Cert: <code>{{ vhost.ssl_cert_path }}</code></p>
    {% endif %}
    {% if vhost.default_pool_id %}
    <p class="meta">Default pool: <strong>{{ vhost.default_pool_name or vhost.default_pool_id }}</strong>
        {% if vhost.default_pool_type %}<span class="badge type-{{ vhost.default_pool_type }}" style="font-size:0.75em">{{ vhost.default_pool_type }}</span>{% endif %}
    </p>
    {% endif %}

    {% if vhost.extra_blocks %}
    <p class="meta" style="font-size:0.85em;color:var(--text-muted)">
        Extra blocks: {% for b in vhost.extra_blocks %}<span class="badge">{{ b.zone }}</span> {% endfor %}
    </p>
    {% endif %}
    {% if vhost.ip_rule_mode %}
    <p class="meta" style="font-size:0.85em;color:var(--text-muted)">
        IP rules: <span class="badge warn">{{ vhost.ip_rule_mode }}list</span>
        ({{ vhost.ip_rule_ips | length }} entr{{ 'y' if (vhost.ip_rule_ips | length) == 1 else 'ies' }})
    </p>
    {% endif %}

    <h4>Routes</h4>
    <table>
        <thead>
            <tr>
                <th>Path Prefix</th>
                <th>Pool</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for r in vhost.routes %}
            <tr>
                <td>
                    <code>{{ r.path_prefix }}</code>
                    {% if r.path_prefix == '/' %}<span class="badge" style="font-size:0.7em;margin-left:4px;vertical-align:middle">auto</span>{% endif %}
                </td>
                <td><a href="/web/pools">{{ r.pool_name }}</a></td>
                <td>
                    {% if r.enabled %}<span class="badge ok">enabled</span>{% else %}<span class="badge warn">disabled</span>{% endif %}
                </td>
                <td>
                    {% if r.path_prefix != '/' %}
                    <button class="btn btn-xs btn-danger" onclick="deleteRoute({{ vhost.id }}, {{ r.id }})">×</button>
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
        {% if not vhost.routes %}
            <tr><td colspan="4" class="empty">No routes configured</td></tr>
        {% endif %}
        </tbody>
    </table>
    <button class="btn btn-sm" onclick="showAddRoute({{ vhost.id }}, '{{ vhost.default_pool_type or '' }}')">+ Add Route</button>
</div>
{% endfor %}

{% if not vhosts %}
<div class="card empty-state">
    <p>No virtual hosts configured. Create a vhost to define server blocks.</p>
</div>
{% endif %}

<!-- Create Vhost Modal -->
<div id="create-vhost-modal" class="modal hidden">
    <div class="modal-content">
        <h3>Create Vhost</h3>
        <form id="create-vhost-form" onsubmit="createVhost(event)">
            <label>Server Name <input type="text" name="server_name" required placeholder="s3.xpto.pt"></label>
            <label>Listen Port <input type="number" name="listen_port" value="443" min="1" max="65535"></label>
            <label><input type="checkbox" name="ssl" id="create-vhost-ssl" checked onchange="toggleSslCertFields('create-vhost-ssl', 'create-ssl-cert-fields')"> SSL</label>
            <div id="create-ssl-cert-fields">
                <label>SSL Certificate Path <input type="text" name="ssl_cert_path" id="create-ssl-cert-path" placeholder="/etc/ssl/s3.xpto.pt/fullchain.pem"></label>
                <label>SSL Key Path <input type="text" name="ssl_key_path" id="create-ssl-key-path" placeholder="/etc/ssl/s3.xpto.pt/privkey.pem"></label>
            </div>
            <label>Default Pool (sets vhost type — nanio or http; all routes must match)
                <select name="default_pool_id">
                    <option value="">— none —</option>
                    {% for p in pools %}
                    <option value="{{ p.id }}" data-type="{{ p.type }}">{{ p.name }} ({{ p.type }})</option>
                    {% endfor %}
                </select>
            </label>
            <label>Extra Directives <textarea name="extra_directives" rows="3" placeholder="Optional nginx directives"></textarea></label>
            <div class="modal-actions">
                <button type="submit" class="btn btn-primary">Create</button>
                <button type="button" class="btn" onclick="hideModal('create-vhost-modal')">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- Add Route Modal -->
<div id="add-route-modal" class="modal hidden">
    <div class="modal-content">
        <h3>Add Route</h3>
        <form id="add-route-form" onsubmit="addRoute(event)">
            <input type="hidden" name="vhost_id" id="route-vhost-id">
            <input type="hidden" id="route-vhost-pool-type" value="">
            <label>Path Prefix <input type="text" name="path_prefix" required placeholder="/2025/"></label>
            <label>Pool
                <select name="pool_id" id="route-pool-select">
                    {% for p in pools %}
                    <option value="{{ p.id }}" data-type="{{ p.type }}">{{ p.name }} ({{ p.type }})</option>
                    {% endfor %}
                </select>
            </label>
            <p id="route-pool-type-note" class="meta" style="display:none;font-size:0.85em;color:var(--text-muted)"></p>
            <label>Extra Directives <textarea name="extra_directives" rows="3" placeholder="Optional"></textarea></label>
            <div class="modal-actions">
                <button type="submit" class="btn btn-primary">Add</button>
                <button type="button" class="btn" onclick="hideModal('add-route-modal')">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- Additional Configurations Modal -->
<div id="extra-blocks-modal" class="modal hidden">
    <div class="modal-content modal-wide">
        <h3>Additional Configurations</h3>
        <input type="hidden" id="extra-blocks-vhost-id">

        <!-- IP Access Control -->
        <h4 style="margin:0 0 0.5rem">IP Access Control</h4>
        <p class="meta" style="font-size:0.85em;color:var(--text-muted);margin-bottom:0.75rem">
            Restrict access to this vhost by IP address or CIDR range. Directives are placed at the
            server block level and apply to all routes.
        </p>
        <div style="display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1rem">
            <label style="flex:0 0 auto">
                Mode
                <select id="ip-rule-mode" onchange="_toggleIpRuleIps()" style="display:block;margin-top:0.25rem">
                    <option value="">— disabled —</option>
                    <option value="allow">Allowlist — allow only these IPs, deny all others</option>
                    <option value="deny">Denylist — deny only these IPs, allow everything else</option>
                </select>
            </label>
            <label style="flex:1;min-width:240px" id="ip-rule-ips-label">
                IPs / CIDRs (one per line)
                <textarea id="ip-rule-ips" rows="4"
                    style="display:block;margin-top:0.25rem;width:100%;font-family:monospace"
                    placeholder="192.168.1.0/24&#10;10.0.0.1"></textarea>
            </label>
        </div>

        <!-- Extra nginx blocks -->
        <h4 style="margin:0 0 0.5rem">Extra nginx Blocks</h4>
        <p class="meta" style="font-size:0.85em;color:var(--text-muted)">
            Inject custom nginx directives into a specific zone of this vhost's server block.<br>
            <strong>top</strong> — immediately after <code>server_name</code> &nbsp;|&nbsp;
            <strong>ssl</strong> — after SSL certificate directives &nbsp;|&nbsp;
            <strong>proxy</strong> — after proxy buffering directives &nbsp;|&nbsp;
            <strong>end</strong> — before the closing <code>}</code>
        </p>
        <div id="extra-blocks-list"></div>
        <button type="button" class="btn btn-sm" onclick="addExtraBlockRow()">+ Add Block</button>
        <div class="modal-actions" style="margin-top:1rem">
            <button type="button" class="btn btn-primary" onclick="saveExtraBlocks()">Save</button>
            <button type="button" class="btn" onclick="hideModal('extra-blocks-modal')">Cancel</button>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div id="preview-modal" class="modal hidden">
    <div class="modal-content modal-wide">
        <h3>Config Preview</h3>
        <pre id="preview-content" class="output"></pre>
        <div class="modal-actions">
            <button class="btn" onclick="hideModal('preview-modal')">Close</button>
        </div>
    </div>
</div>
{% endblock %}