{% extends "base.html" %}
{% block content %}

<h1>Network</h1>
<p class="page-subtitle">
    Every device on your LAN, updated every 3 seconds.
</p>

{% if flash_msg %}
    <div class="flash flash-good">
        {{ flash_msg }}
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}
{% if error_msg %}
    <div class="flash flash-error">
        {{ error_msg }}
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}

<div class="page-actions">
    <button type="button" class="btn-primary" onclick="openAddReservation()">
        + Add reservation
    </button>
</div>

<section>
    <div class="stat-grid">
        <div class="stat-card">
            <div class="label">Devices</div>
            <div class="value" id="n-total">—</div>
            <div class="hint">across all LAN segments</div>
        </div>
        <div class="stat-card">
            <div class="label">Online now</div>
            <div class="value" id="n-online">—</div>
            <div class="hint">seen in the last ~minute</div>
        </div>
        <div class="stat-card">
            <div class="label">Reserved</div>
            <div class="value" id="n-reserved">—</div>
            <div class="hint">static MAC→IP bindings</div>
        </div>
        <div class="stat-card">
            <div class="label">Customers</div>
            <div class="value" id="n-customers">—</div>
            <div class="hint">connected via a voucher</div>
        </div>
    </div>
</section>

<section>
    <div class="section-head">
        <h2>Devices</h2>
        <span class="section-link" id="n-last-updated">loading…</span>
    </div>

    <div class="table-scroll">
        <table id="n-table">
            <thead>
                <tr>
                    <th>Device</th>
                    <th>IP</th>
                    <th>MAC</th>
                    <th class="col-hide-mobile">Segment</th>
                    <th>Status</th>
                    <th class="col-hide-mobile">Type</th>
                    <th class="col-hide-mobile">Customer</th>
                    <th style="text-align:right;">Actions</th>
                </tr>
            </thead>
            <tbody id="n-tbody">
                <tr><td colspan="8" style="text-align:center; color:var(--muted); padding:24px;">
                    Loading…
                </td></tr>
            </tbody>
        </table>
    </div>

    <p class="page-subtitle" style="font-size:12px; margin-top:14px;">
        <strong>Reserved</strong> = always the same IP ·
        <strong>Dynamic</strong> = from the customer pool ·
        <strong>Seen only</strong> = no active lease.
        <strong>Make Static</strong> pins a device to its current IP;
        <strong>Release</strong> drops its lease so it picks up a new one.
    </p>
</section>

<!-- ============ Ports (ADR-0022 part 3) ============ -->
<section id="ports">
    <div class="section-head">
        <h2>Ports</h2>
    </div>
    <p class="page-subtitle" style="font-size:12px; margin-top:-4px;">
        The network ports on this device and what each one is doing.
    </p>
    <div class="card">
        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>Port</th>
                        <th>Doing</th>
                        <th>Link</th>
                        <th class="col-hide-mobile">Address</th>
                        <th class="col-hide-mobile">Type</th>
                    </tr>
                </thead>
                <tbody>
                {% for i in data.ifaces.list %}
                    <tr>
                        <td>
                            <code>{{ i.name }}</code>
                            {% if i.vlans %}<div style="font-size:11px;color:var(--muted-2);margin-top:2px;">+ {{ i.vlans | length }} VLAN{{ '' if i.vlans|length == 1 else 's' }}</div>{% endif %}
                        </td>
                        <td>
                            {% if i.role == 'wan' %}<span class="badge badge-active">Internet</span>
                            {% elif i.role == 'lan' %}<span class="badge badge-active">Customers</span>
                            {% elif i.role == 'lan-intent' %}<span class="badge badge-paused">Configured</span>
                            {% else %}<span class="badge badge-expired">Unused</span>{% endif %}
                            <div style="font-size:11px;color:var(--muted-2);margin-top:2px;">{{ i.role_detail }}</div>
                        </td>
                        <td>
                            {% if i.carrier == 'up' %}<span style="color:var(--good,#16a34a);font-weight:600;">● up</span>{% if i.speed_mbps %} <span style="font-size:11px;color:var(--muted-2);">{{ i.speed_mbps }}M</span>{% endif %}
                            {% elif i.carrier == 'down' %}<span style="color:var(--warn,#d97706);font-weight:600;">○ unplugged</span>
                            {% elif i.carrier == 'missing' %}<span style="color:var(--danger,#dc2626);font-weight:700;">✕ not detected</span>
                            {% else %}<span style="color:var(--muted-2);">unknown</span>{% endif %}
                        </td>
                        <td class="col-hide-mobile">{% if i.ipv4 %}<span class="code">{{ i.ipv4 }}</span>{% else %}<span style="color:var(--muted-2);">—</span>{% endif %}</td>
                        <td class="col-hide-mobile">
                            {% if i.is_usb %}<span title="USB adapters are the most common hardware failure on these boxes">USB</span>{% elif i.driver %}onboard{% else %}—{% endif %}
                            {% if i.driver %}<div style="font-size:11px;color:var(--muted-2);">{{ i.driver }}</div>{% endif %}
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="5" style="color:var(--muted-2);">No ports detected.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        {# The picker. Guarded by confirm-or-auto-revert: picking a port with no
           path back to the operator would otherwise lock them out for real —
           the fallback only covers a MISSING port, not a wrong-but-present one. #}
        {% if data.ifaces.pending %}
        <div style="background:#78350f;color:#fde68a;border:1px solid #b45309;border-radius:10px;padding:10px 14px;margin-top:14px;font-size:13px;">
            <div style="font-weight:600;margin-bottom:6px;">⏳ Confirm the LAN port change</div>
            <div style="margin-bottom:8px;">Moved to <code>{{ data.ifaces.pending.new }}</code>. If you don't confirm, it reverts to
            <code>{{ data.ifaces.pending.old }}</code> and reboots in about {{ (data.ifaces.pending.seconds_remaining // 60) + 1 }} min.</div>
            <form method="POST" action="/network/lan-iface/confirm" style="display:inline;">
                <button type="submit" class="btn btn-primary">Keep this port</button>
            </form>
        </div>
        {% else %}
        <div class="form-grid" style="margin-top:14px; grid-template-columns:minmax(0,1fr);">
            <div class="col-span-all" style="min-width:0;">
                <label for="lan-iface">Customer LAN port</label>
                <form method="POST" action="/network/lan-iface" id="lan-iface-form"
                      onsubmit="return confirmLanIface();"
                      style="display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:0; max-width:100%;">
                    <select name="iface" id="lan-iface" style="flex:0 1 260px; width:auto; min-width:0; max-width:100%;">
                        {% for c in data.ifaces.candidates %}
                        <option value="{{ c }}" {% if c == data.ifaces.intent %}selected{% endif %}>
                            {{ c }}{% if c == data.ifaces.mgmt_vlan_iface %} — no USB adapter (needs a managed switch){% endif %}
                        </option>
                        {% endfor %}
                    </select>
                    <button type="submit" class="btn-primary">Change port</button>
                </form>
                <p class="form-hint" style="margin-top:6px;">
                    Customers move to this port. You'll need to confirm from the new port within 5 minutes or it reverts by itself.
                </p>
            </div>
        </div>
        {% endif %}
    </div>
</section>

<!-- ============ Primary LAN — relocated from /system (Bucket C) ============ -->
<section>
    <div class="section-head">
        <h2>Primary LAN ({{ data.ifaces.effective or 'eth1' }})</h2>
    </div>
    <p class="page-subtitle" style="font-size:12px; margin-top:-4px;">
        Subnet, DHCP pool, and customer DNS for your main server-vendo network.
    </p>
</section>

<section id="lan-subnet">
    <h2>LAN Subnet</h2>
    <div class="card">

        {% if data.lan.pending %}
        {# A change has been applied and is awaiting confirmation. The operator
           is seeing this because they reconnected to the AP on the NEW subnet
           and logged back in — so the new network already works for them. #}
        <div style="background:#fffbeb; border:1px solid #fcd34d; color:#92400e; border-radius:var(--radius); padding:14px 16px; margin-bottom:18px;">
            <div style="font-weight:700; font-size:14px; margin-bottom:6px;">
                ⏱ LAN subnet change — pending your confirmation
            </div>
            <p style="margin:0 0 10px; font-size:13px; line-height:1.55;">
                You're now reaching this admin on the <strong>new</strong> network
                (<code>{{ data.lan.pending.new }}</code>, SBC at
                <code>{{ data.lan.pending.new_sbc_ip }}</code>). Since you got here,
                it's working — click <strong>Confirm</strong> to keep it. If
                anything's wrong, <strong>Revert</strong> to return to
                <code>{{ data.lan.pending.old }}</code>.
            </p>
            <p style="margin:0 0 12px; font-size:12px; line-height:1.5;">
                {% if data.lan.pending.expired %}
                    <strong>The confirmation window has passed.</strong> The SBC
                    will automatically revert and reboot on its next check — click
                    Confirm right now if you want to keep the new network.
                {% elif data.lan.pending.seconds_remaining >= 60 %}
                    Auto-revert in about
                    <strong>{{ data.lan.pending.seconds_remaining // 60 }}
                    minute{{ 's' if (data.lan.pending.seconds_remaining // 60) != 1 else '' }}</strong>
                    if you don't confirm — so you can never get locked out.
                {% else %}
                    <strong>Auto-revert in under a minute</strong> if you don't
                    confirm — so you can never get locked out.
                {% endif %}
            </p>
            <div style="display:flex; gap:10px; flex-wrap:wrap;">
                <form method="POST" action="/system/lan-subnet/confirm" style="display:inline;">
                    <button type="submit" class="btn-primary">✓ Confirm — keep this network</button>
                </form>
                <form method="POST" action="/system/lan-subnet/revert" style="display:inline;"
                      onsubmit="return confirm('Revert to {{ data.lan.pending.old }} and reboot now? Customers will drop for 30–60 seconds while the SBC restarts.');">
                    <button type="submit" class="btn-danger">↩ Revert &amp; reboot</button>
                </form>
            </div>
        </div>
        {% else %}

        <p class="card-desc">
            The network your customers live on; the SBC is the first address
            (<code>{{ data.lan.sbc_ip }}</code>). Change only if it clashes with your ISP network.
        </p>
        <p class="card-desc" style="font-size:12px; color:var(--muted);">
            <strong>Private /24 only.</strong> Disruptive — your connection drops; reconnect and
            click <strong>Confirm</strong> within {{ data.lan.confirm_window_minutes }} min or it
            auto-reverts, so a wrong subnet can't lock you out.
        </p>
        <form method="POST" action="/system/lan-subnet" class="edit-form"
              onsubmit="return confirm('Change the LAN subnet now?\n\nYour connection WILL drop. Reconnect to the AP, then log in at the new address shown and click Confirm within {{ data.lan.confirm_window_minutes }} minutes — otherwise the SBC reverts and reboots automatically.');">
            <div class="form-grid">
                <div>
                    <label for="lan_subnet">New LAN subnet (CIDR)</label>
                    <input type="text" id="lan_subnet" name="lan_subnet"
                           value="{{ data.lan.subnet }}"
                           placeholder="192.168.50.0/24"
                           pattern="^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/24$"
                           autocomplete="off" required>
                    <div class="form-hint">
                        Current: <strong><code>{{ data.lan.subnet }}</code></strong>
                        (SBC at <code>{{ data.lan.sbc_ip }}</code>).
                        Default is <code>{{ data.lan.default }}</code>.
                    </div>
                </div>
            </div>
            <div class="form-actions" style="margin-top: 20px;">
                <button type="submit" class="btn btn-primary">Apply LAN subnet</button>
            </div>
        </form>
        {% endif %}
    </div>
</section>

<section>
    <h2>Customer DNS</h2>
    <div class="card">
        <p class="card-desc">
            DNS servers your customers use. Doesn't affect the SBC's own DNS.
        </p>
        <form method="POST" action="/system/dns" class="edit-form"
              onsubmit="return confirm('Save DNS upstream and reload dnsmasq? New customer queries will use the new servers immediately.');">
            <div class="form-grid">
                <div>
                    <label style="display:block; margin-bottom:8px;">
                        <input type="radio" name="preset" value="google"
                               id="dns_preset_google"
                               {% if data.lan_dns.preset == "google" %}checked{% endif %}
                               onchange="document.getElementById('dns_custom_input').disabled = true;">
                        <strong>Google</strong>
                        <span style="color:var(--muted); font-size:13px;">(8.8.8.8, 8.8.4.4)</span>
                    </label>
                    <label style="display:block;">
                        <input type="radio" name="preset" value="custom"
                               id="dns_preset_custom"
                               {% if data.lan_dns.preset == "custom" %}checked{% endif %}
                               onchange="document.getElementById('dns_custom_input').disabled = false; document.getElementById('dns_custom_input').focus();">
                        <strong>Custom</strong>
                        <span style="color:var(--muted); font-size:13px;">type 1-3 IPv4 addresses below</span>
                    </label>
                </div>
                <div>
                    <label for="dns_custom_input">Custom DNS servers (comma-separated)</label>
                    <input type="text" id="dns_custom_input" name="custom_ips"
                           value="{% if data.lan_dns.is_custom %}{{ data.lan_dns.value }}{% endif %}"
                           placeholder="e.g. 9.9.9.9, 149.112.112.112"
                           {% if not data.lan_dns.is_custom %}disabled{% endif %}
                           autocomplete="off">
                    <div class="form-hint">
                        Currently active: <strong><code>{{ data.lan_dns.value }}</code></strong>
                    </div>
                </div>
            </div>
            <div class="form-actions" style="margin-top: 20px;">
                <button type="submit" class="btn btn-primary">Save DNS</button>
            </div>
        </form>
    </div>
</section>

<section>
    <h2>DHCP Pool</h2>
    <div class="card">
        <p class="card-desc">
            IP range handed out to customers — a bigger pool means more simultaneous customers.
        </p>
        <p class="card-desc" style="font-size:12px; color:var(--muted);">
            Must be inside the LAN subnet and skip the SBC's own IP. Existing leases keep their IPs until they renew.
        </p>
        <form method="POST" action="/system/dhcp-pool" class="edit-form">
            <div class="form-grid">
                <div>
                    <label for="pool_start">Pool start IP</label>
                    <input type="text" id="pool_start" name="pool_start"
                           value="{{ data.lan_dhcp.start }}"
                           placeholder="10.0.10.100"
                           pattern="^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$"
                           autocomplete="off" required>
                </div>
                <div>
                    <label for="pool_end">Pool end IP</label>
                    <input type="text" id="pool_end" name="pool_end"
                           value="{{ data.lan_dhcp.end }}"
                           placeholder="10.0.10.250"
                           pattern="^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$"
                           autocomplete="off" required>
                </div>
                <div>
                    <label for="lease_hours">Lease time (hours)</label>
                    <input type="number" id="lease_hours" name="lease_hours"
                           value="{{ data.lan_dhcp.lease_hours }}"
                           min="1" max="168" autocomplete="off" required>
                </div>
            </div>
            <div class="form-hint" style="margin-top:8px;">
                Current pool: <strong><code>{{ data.lan_dhcp.start }}</code>
                – <code>{{ data.lan_dhcp.end }}</code></strong>
                ({{ data.lan_dhcp.size }} address{{ '' if data.lan_dhcp.size == 1 else 'es' }},
                <strong>{{ data.lan_dhcp.used }} in use</strong>) · lease {{ data.lan_dhcp.lease_hours }}h.
                {% if data.lan_dhcp.size and data.lan_dhcp.used >= data.lan_dhcp.size %}
                <span style="color:var(--warn-text);"><strong>Pool full — new customers can't get an IP. Widen the range.</strong></span>
                {% elif data.lan_dhcp.size and data.lan_dhcp.used >= (data.lan_dhcp.size * 0.9) %}
                <span style="color:var(--warn-text);">Pool nearly full.</span>
                {% endif %}
            </div>
            <div class="form-actions" style="margin-top: 20px;">
                <button type="submit" class="btn btn-primary">Save DHCP pool</button>
            </div>
        </form>
    </div>
</section>

<!-- ============ Sub-vendo VLAN segments (multi-vendo P1.5a) ============ -->
<section>
    <div class="section-head">
        <h2>Sub-vendo VLANs</h2>
        <button type="button" class="btn-primary" onclick="openAddSegment()">+ Add segment</button>
    </div>

    <p class="page-subtitle" style="font-size:12px; margin-top:0;">
        Extra, fully-isolated customer networks on tagged VLANs over the same uplink. Needs a VLAN-capable switch.
    </p>

    {% if segments %}
    <div class="table-scroll">
        <table>
            <thead>
                <tr>
                    <th>VLAN</th>
                    <th>Subnet</th>
                    <th class="col-hide-mobile">Gateway</th>
                    <th class="col-hide-mobile">Interface</th>
                    <th class="col-hide-mobile">DHCP pool</th>
                    <th>Online</th>
                    <th style="text-align:right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for seg in segments %}
                <tr>
                    <td><strong>{{ seg.vlan }}</strong></td>
                    <td><code>{{ seg.subnet }}</code></td>
                    <td class="col-hide-mobile"><code>{{ seg.gateway }}</code></td>
                    <td class="col-hide-mobile"><code>{{ seg.iface }}</code></td>
                    <td class="col-hide-mobile"><code>{{ seg.pool_start }}</code>–<code>{{ seg.pool_end }}</code></td>
                    <td>{{ seg.online }}</td>
                    <td style="text-align:right; white-space:nowrap;">
                        {# ADR-0020 — per-VLAN voucher centralization opt-in.
                           Checkbox auto-submits its little form so the operator just clicks once. #}
                        <form method="POST" action="/network/segment/{{ seg.vlan }}/centralize-vouchers"
                              style="display:inline-block; margin-right:8px; vertical-align:middle;">
                            <label style="cursor:pointer; font-size:12px; color:var(--text-body);"
                                   title="When ON, this VLAN joins the central voucher pool BOTH WAYS — its ESP mints into the OPi vouchers table, AND its customers can use any voucher from that pool (server-issued + every other centralized VLAN). When OFF, this VLAN is isolated: its ESP mints to access_grants and its customers can ONLY use ESP-issued grants for this VLAN. The ESP always reports its own sale to vendorawifi.com — no double-reporting either way.">
                                <input type="checkbox" name="enabled" value="on"
                                       {% if seg.centralize_vouchers %}checked{% endif %}
                                       onchange="this.form.submit()">
                                Centralize
                            </label>
                        </form>
                        <button class="btn-sm" data-seg-pool="{{ seg.vlan }}"
                                data-pstart="{{ seg.pool_start_octet }}"
                                data-pend="{{ seg.pool_end_octet }}">Edit pool</button>
                        <button class="btn-sm" data-seg-bw="{{ seg.vlan }}"
                                data-bw='{{ seg.bw | tojson }}'>Edit bandwidth</button>
                        <button class="btn-sm-danger" data-seg-del="{{ seg.vlan }}"
                                data-subnet="{{ seg.subnet }}" data-online="{{ seg.online }}">Delete</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <p class="page-subtitle" style="font-size:12px; margin-top:14px;">
        <em>Online</em> is a snapshot from when this page loaded.
    </p>
    {% else %}
    <div class="empty-state">
        No sub-vendo VLANs yet.
    </div>
    {% endif %}
</section>

<!-- ============ Walled garden (activation-site access) ============ -->
<section>
    <h2>Activation-site access</h2>
    <div class="card">
        <p class="card-desc">
            Lets anyone on the hotspot reach the activation site
            (<code>vendorawifi.com</code>) without inserting a coin — so you can
            register + activate this SBC even at a location with no other internet.
            Only the listed site is reachable; everything else still hits the captive portal.
        </p>
        <form method="POST" action="/network/walled-garden" class="edit-form">
            <div style="margin-bottom: 14px;">
                <label style="display: inline-flex; align-items: center; gap: 8px; cursor: pointer;">
                    <input type="checkbox" name="walled_garden_enabled" value="on"
                           {% if walled_garden_enabled %}checked{% endif %}>
                    <span>Enabled</span>
                </label>
            </div>
            <div class="form-grid" style="grid-template-columns: 1fr; max-width: 520px; margin-bottom: 0;">
                <div>
                    <label for="wg-domains">Allowed domains</label>
                    <input type="text" id="wg-domains" name="walled_garden_domains"
                           value="{{ walled_garden_domains }}" placeholder="vendorawifi.com">
                </div>
            </div>
            <div class="form-hint" style="margin-top:8px;">
                Comma- or space-separated; subdomains are included automatically. Default
                <code>vendorawifi.com</code> — add more only if the registration page loads
                assets from another domain.
            </div>
            <div class="form-actions" style="margin-top: 20px;">
                <button type="submit" class="btn btn-primary">Save activation access</button>
            </div>
        </form>
    </div>
</section>

<!-- ============ ESP API credentials (multi-vendo) ============ -->
{% if segments %}
<section>
    <h2>ESP API credentials</h2>
    <div class="card">
        <p class="card-desc">
            The login each ESP uses to reach this controller's API.
            <strong>Must match the API username + password set on every ESP.</strong>
        </p>
        <p class="card-desc" style="font-size:12px; color:var(--muted);">
            Shown here on purpose — you need it to set up each ESP.
        </p>
        <form method="POST" action="/network/api-credentials" class="edit-form">
            <div class="form-grid" style="grid-template-columns: 1fr 1fr;">
                <div>
                    <label for="api-user">API username</label>
                    <input type="text" id="api-user" name="api_user"
                           value="{{ rosapi_user or 'vendora' }}"
                           maxlength="64" autocomplete="off" required>
                </div>
                <div>
                    <label for="api-pass">API password</label>
                    <div style="display:flex; gap:8px;">
                        <input type="password" id="api-pass" name="api_pass"
                               value="{{ rosapi_pass }}" maxlength="64"
                               autocomplete="off" required style="flex:1; min-width:0;">
                        <button type="button" id="api-pass-toggle" class="btn btn-secondary"
                                onclick="toggleApiPass()" style="flex:0 0 auto;">Show</button>
                    </div>
                </div>
            </div>
            <div class="form-hint" style="margin-top:8px;">
                Current username: <strong><code>{{ rosapi_user or 'vendora' }}</code></strong>. Update each ESP to match if you change it.
            </div>
            <div class="form-actions" style="margin-top: 20px;">
                <button type="submit" class="btn btn-primary">Save API credentials</button>
            </div>
        </form>
    </div>
</section>
<script>
function toggleApiPass() {
    var f = document.getElementById('api-pass');
    var b = document.getElementById('api-pass-toggle');
    if (f.type === 'password') { f.type = 'text'; b.textContent = 'Hide'; }
    else { f.type = 'password'; b.textContent = 'Show'; }
}
</script>
{% endif %}

<!-- ============ Sub-vendo fleet health (multi-vendo P5) ============ -->
{% if segments %}
<section>
    <div class="section-head">
        <h2>Sub-vendo fleet</h2>
        <span class="section-link" id="fleet-updated">loading…</span>
    </div>
    <p class="page-subtitle" style="font-size:12px; margin-top:0;">
        Each sub-vendo's ESP status and connected customers. Refreshes every 10 seconds.
    </p>
    <div id="fleet-container">
        <div class="empty-state">Loading fleet…</div>
    </div>
</section>

<!-- ESP Vouchers moved to its own page (multi-vendo P5) -->
<section>
    <p class="page-subtitle" style="font-size:13px; margin:0;">
        ESP-issued vouchers have their own page: <a href="/esp-vouchers">open ESP Vouchers &rarr;</a>
    </p>
</section>
{% endif %}

<!-- ============ Shared reservation modal (add / pin / edit) ============ -->
<div id="res-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="res-modal-title" hidden>
    <div class="modal-backdrop" onclick="closeResModal()"></div>
    <div class="modal-dialog">
        <header class="modal-header">
            <h2 id="res-modal-title" class="modal-title">Add reservation</h2>
            <button type="button" class="modal-close" onclick="closeResModal()" aria-label="Close">&times;</button>
        </header>
        <div class="modal-body">
            <p class="card-desc" id="res-modal-desc">
                Pin a device (by MAC) to a fixed IP, <strong>outside</strong> the customer pool
                (e.g. <code>10.0.10.253</code> for an ESP).
            </p>
            <form id="res-form" method="POST" action="/network/reservation/add" class="edit-form">
                <div class="form-grid">
                    <div>
                        <label for="res-f-label">Label (optional)</label>
                        <input type="text" id="res-f-label" name="label" maxlength="50"
                               placeholder="e.g. esp-controller" autocomplete="off">
                    </div>
                    <div>
                        <label for="res-f-mac">MAC address</label>
                        <input type="text" id="res-f-mac" name="mac"
                               placeholder="aa:bb:cc:dd:ee:ff" autocomplete="off" required>
                    </div>
                    <div>
                        <label for="res-f-ip">IPv4</label>
                        <input type="text" id="res-f-ip" name="ip"
                               placeholder="10.0.10.253"
                               pattern="^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$"
                               autocomplete="off" required>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary" id="res-f-submit">Add reservation</button>
                    <button type="button" class="btn-secondary" onclick="closeResModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ============ Add sub-vendo segment modal (P1.5a) ============ -->
<div id="seg-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="seg-modal-title" hidden>
    <div class="modal-backdrop" onclick="closeSegModal()"></div>
    <div class="modal-dialog">
        <header class="modal-header">
            <h2 id="seg-modal-title" class="modal-title">Add sub-vendo segment</h2>
            <button type="button" class="modal-close" onclick="closeSegModal()" aria-label="Close">&times;</button>
        </header>
        <div class="modal-body">
            <p class="card-desc">
                Pick a VLAN ID (11–254) — it gets its own isolated subnet + DHCP. Your switch must tag it on the SBC's port.
            </p>
            <form id="seg-form" method="POST" action="/network/segment/add" class="edit-form">
                <div class="form-grid">
                    <div>
                        <label for="seg-f-vlan">VLAN ID</label>
                        <input type="number" id="seg-f-vlan" name="vlan_id" min="11" max="254"
                               placeholder="e.g. 11" autocomplete="off" required>
                    </div>
                </div>
                <div class="card" style="margin:14px 0; background:var(--primary-light);">
                    <p style="margin:0 0 4px; font-size:13px; font-weight:600;">This will create:</p>
                    <ul style="margin:0; padding-left:18px; font-size:13px; line-height:1.9;">
                        <li>Subnet <code id="seg-preview-subnet">—</code></li>
                        <li>Gateway <code id="seg-preview-gw">—</code></li>
                        <li>Interface <code id="seg-preview-iface">—</code></li>
                    </ul>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">Create segment</button>
                    <button type="button" class="btn-secondary" onclick="closeSegModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ============ Delete sub-vendo segment confirm modal (P1.5a) ============ -->
<div id="seg-del-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="seg-del-title" hidden>
    <div class="modal-backdrop" onclick="closeSegDelModal()"></div>
    <div class="modal-dialog">
        <header class="modal-header">
            <h2 id="seg-del-title" class="modal-title">Delete segment</h2>
            <button type="button" class="modal-close" onclick="closeSegDelModal()" aria-label="Close">&times;</button>
        </header>
        <div class="modal-body">
            <p class="card-desc" id="seg-del-desc">…</p>
            <p id="seg-del-warn" style="color:var(--warn-text); font-size:13px; margin:0 0 14px;"></p>
            <form id="seg-del-form" method="POST">
                <div style="margin-bottom:16px;">
                    <label for="seg-del-confirm" style="display:block; font-size:13px; color:var(--text); margin-bottom:6px;">
                        Type <strong>delete</strong> to confirm
                    </label>
                    <input type="text" id="seg-del-confirm" autocomplete="off" autocapitalize="none"
                           spellcheck="false" placeholder="delete"
                           style="width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--border, #d1d5db); border-radius:8px; font-size:15px; font-family:inherit;">
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-danger" id="seg-del-submit" disabled>Delete segment</button>
                    <button type="button" class="btn-secondary" onclick="closeSegDelModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ============ Edit segment DHCP pool modal (P1.5b) ============ -->
<div id="seg-pool-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="seg-pool-title" hidden>
    <div class="modal-backdrop" onclick="closeSegPoolModal()"></div>
    <div class="modal-dialog">
        <header class="modal-header">
            <h2 id="seg-pool-title" class="modal-title">Edit DHCP pool</h2>
            <button type="button" class="modal-close" onclick="closeSegPoolModal()" aria-label="Close">&times;</button>
        </header>
        <div class="modal-body">
            <p class="card-desc">
                Address range for this segment — you set the last number (2–254); the network part
                (<code id="seg-pool-net">10.0.x.</code>) is fixed by the VLAN.
            </p>
            <form id="seg-pool-form" method="POST" class="edit-form">
                <div class="form-grid">
                    <div>
                        <label for="seg-pool-start">Pool start (<code id="seg-pool-net-a">10.0.x.</code>)</label>
                        <input type="number" id="seg-pool-start" name="pool_start_octet"
                               min="2" max="254" autocomplete="off" required>
                    </div>
                    <div>
                        <label for="seg-pool-end">Pool end (<code id="seg-pool-net-b">10.0.x.</code>)</label>
                        <input type="number" id="seg-pool-end" name="pool_end_octet"
                               min="2" max="254" autocomplete="off" required>
                    </div>
                </div>
                <div class="card" style="margin:14px 0; background:var(--primary-light);">
                    <p style="margin:0; font-size:13px;">
                        Pool: <code id="seg-pool-preview">—</code>
                    </p>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">Save pool</button>
                    <button type="button" class="btn-secondary" onclick="closeSegPoolModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ============ Edit segment bandwidth modal (P1.5c) ============ -->
<div id="seg-bw-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="seg-bw-title" hidden>
    <div class="modal-backdrop" onclick="closeSegBwModal()"></div>
    <div class="modal-dialog">
        <header class="modal-header">
            <h2 id="seg-bw-title" class="modal-title">Edit bandwidth</h2>
            <button type="button" class="modal-close" onclick="closeSegBwModal()" aria-label="Close">&times;</button>
        </header>
        <div class="modal-body">
            <p class="card-desc">
                Speed caps for this segment. <strong>Blank a field to inherit your global cap.</strong>
            </p>
            <form id="seg-bw-form" method="POST" class="edit-form">
                <div class="form-grid" style="grid-template-columns: 1fr 1fr;">
                    <div>
                        <label for="seg-bw-pcd">Per-customer download</label>
                        <div style="display:flex; gap:8px;">
                            <input type="number" id="seg-bw-pcd" name="per_client_down_value"
                                   min="0" step="1" autocomplete="off" style="flex:1; min-width:0;">
                            <select name="per_client_down_unit" id="seg-bw-pcd-unit" style="flex:0 0 auto; width:84px;">
                                <option value="kbps">Kbps</option>
                                <option value="mbps">Mbps</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label for="seg-bw-pcu">Per-customer upload</label>
                        <div style="display:flex; gap:8px;">
                            <input type="number" id="seg-bw-pcu" name="per_client_up_value"
                                   min="0" step="1" autocomplete="off" style="flex:1; min-width:0;">
                            <select name="per_client_up_unit" id="seg-bw-pcu-unit" style="flex:0 0 auto; width:84px;">
                                <option value="kbps">Kbps</option>
                                <option value="mbps">Mbps</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label for="seg-bw-td">Segment total download</label>
                        <div style="display:flex; gap:8px;">
                            <input type="number" id="seg-bw-td" name="total_down_value"
                                   min="0" step="1" autocomplete="off" style="flex:1; min-width:0;">
                            <select name="total_down_unit" id="seg-bw-td-unit" style="flex:0 0 auto; width:84px;">
                                <option value="kbps">Kbps</option>
                                <option value="mbps">Mbps</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label for="seg-bw-tu">Segment total upload</label>
                        <div style="display:flex; gap:8px;">
                            <input type="number" id="seg-bw-tu" name="total_up_value"
                                   min="0" step="1" autocomplete="off" style="flex:1; min-width:0;">
                            <select name="total_up_unit" id="seg-bw-tu-unit" style="flex:0 0 auto; width:84px;">
                                <option value="kbps">Kbps</option>
                                <option value="mbps">Mbps</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-actions" style="margin-top: 20px;">
                    <button type="submit" class="btn-primary">Save caps</button>
                    <button type="button" class="btn-secondary" onclick="closeSegBwModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Hidden form used to submit a Remove without inline-row markup -->
<form id="res-delete-form" method="POST" style="display:none;"></form>

<!-- Hidden form used to submit a lease Release (MAC set at click time) -->
<form id="lease-release-form" method="POST" action="/network/lease/release" style="display:none;">
    <input type="hidden" name="mac" value="">
</form>

<script>
// Primary-LAN port picker (ADR-0022 part 3). This is a disruptive, lock-out-
// capable action — every customer moves to the new port and the operator's own
// session drops — so make them read what's about to happen. The auto-revert is
// the safety net, not an excuse to skip the warning.
function confirmLanIface() {
    var sel = document.getElementById('lan-iface');
    if (!sel) return true;
    var target = sel.value;
    var extra = (target.indexOf('.') !== -1)
        ? '\n\nThis is a tagged VLAN port — your switch must already carry VLAN ' +
          target.split('.').pop() + ' to that access point, or nobody (including you) can reach it.'
        : '';
    return confirm(
        'Move the customer LAN to ' + target + '?\n\n' +
        'Your connection to this page will drop, and every customer disconnects.' +
        extra + '\n\nReconnect via the new port and confirm within 5 minutes, or the ' +
        'device reverts and reboots by itself.'
    );
}

// Network device list poller + reservation management (S24).
(function() {
    var POLL_MS = 3000;
    var modal = document.getElementById('res-modal');
    var form  = document.getElementById('res-form');
    var paused = false;   // hold polling while a modal is open

    function escapeHtml(s) {
        return String(s == null ? '' : s).replace(/[&<>"']/g, function(c) {
            return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];
        });
    }

    function statusBadge(s) {
        if (s === 'online') return '<span class="badge badge-active">Online</span>';
        return '<span class="badge badge-expired">Offline</span>';
    }

    function typeCell(t) {
        if (t === 'reserved')
            return '<span class="badge-source" style="background:var(--primary-light); color:var(--primary-700);">Reserved</span>';
        if (t === 'dynamic')
            return '<span class="badge-source">Dynamic</span>';
        return '<span class="badge-source" style="font-style:italic;">Seen only</span>';
    }

    function customerCell(r) {
        if (!r.voucher_code) {
            // ESP-issued grant (multi-vendo P5): a sub-vendo customer has no
            // voucher row, so surface their grant code + time left here.
            if (r.grant_code) {
                return '<code>' + escapeHtml(r.grant_code) + '</code> '
                    + '<span class="badge badge-active">ESP'
                    + (r.grant_minutes_remaining ? ' · ' + r.grant_minutes_remaining + 'm' : '')
                    + '</span>';
            }
            return '<span style="color:var(--muted);">—</span>';
        }
        var st = r.voucher_status || '';
        var badge = st ? ' <span class="badge badge-' + escapeHtml(st) + '">' + escapeHtml(st) + '</span>' : '';
        return '<code>' + escapeHtml(r.voucher_code) + '</code>' + badge;
    }

    function deviceName(r) {
        return r.label || r.hostname || '(unknown)';
    }

    function ipCell(r) {
        var html = '<code>' + escapeHtml(r.ip || '—') + '</code>';
        if (r.reserved_diff && r.reserved_ip) {
            html += '<br><span style="font-size:11px; color:var(--warn-text);">reserved '
                  + escapeHtml(r.reserved_ip) + '</span>';
        }
        return html;
    }

    function actionsCell(r) {
        var btns = '';
        if (r.type === 'reserved') {
            btns += '<button class="btn-sm" data-act="edit"'
                  + ' data-id="'    + escapeHtml(r.reservation_id) + '"'
                  + ' data-mac="'   + escapeHtml(r.mac) + '"'
                  + ' data-ip="'    + escapeHtml(r.reserved_ip || r.ip) + '"'
                  + ' data-label="' + escapeHtml(r.label || '') + '">Edit</button>';
            btns += '<button class="btn-sm-danger" data-act="remove"'
                  + ' data-id="'   + escapeHtml(r.reservation_id) + '"'
                  + ' data-name="' + escapeHtml(deviceName(r)) + '">Remove</button>';
        } else if (r.can_pin) {
            btns += '<button class="btn-sm" data-act="pin"'
                  + ' data-mac="'  + escapeHtml(r.mac) + '"'
                  + ' data-ip="'   + escapeHtml(r.current_ip || r.ip) + '"'
                  + ' data-host="' + escapeHtml(r.hostname || '') + '">Make Static</button>';
        } else {
            // Seen-only / no live in-segment lease: offer a generic reserve
            // (operator picks an out-of-pool IP).
            btns += '<button class="btn-sm" data-act="reserve"'
                  + ' data-mac="'  + escapeHtml(r.mac) + '"'
                  + ' data-host="' + escapeHtml(r.hostname || '') + '">Reserve…</button>';
        }
        // Release: drop the device's current dynamic lease so it re-requests
        // (and lands on its reservation, if any) next time it connects. Shown
        // for any row that actually holds a lease right now.
        if (r.current_ip) {
            btns += '<button class="btn-sm-danger" data-act="release"'
                  + ' data-mac="'  + escapeHtml(r.mac) + '"'
                  + ' data-ip="'   + escapeHtml(r.current_ip) + '"'
                  + ' data-name="' + escapeHtml(deviceName(r)) + '">Release</button>';
        }
        return btns || '<span style="color:var(--muted);">—</span>';
    }

    function render(rows) {
        var tbody = document.getElementById('n-tbody');
        var total = rows.length, online = 0, reserved = 0, customers = 0;
        rows.forEach(function(r) {
            if (r.status === 'online') online++;
            if (r.type === 'reserved') reserved++;
            if (r.voucher_code) customers++;
        });
        document.getElementById('n-total').textContent = total;
        document.getElementById('n-online').textContent = online;
        document.getElementById('n-reserved').textContent = reserved;
        document.getElementById('n-customers').textContent = customers;

        if (rows.length === 0) {
            tbody.innerHTML = '<tr><td colspan="8" style="text-align:center; '
                + 'color:var(--muted); padding:24px;">No devices seen yet.</td></tr>';
            return;
        }
        var html = '';
        rows.forEach(function(r) {
            html += '<tr>'
                + '<td>' + escapeHtml(deviceName(r)) + '</td>'
                + '<td>' + ipCell(r) + '</td>'
                + '<td><code>' + escapeHtml(r.mac || '—') + '</code></td>'
                + '<td class="col-hide-mobile">' + escapeHtml(r.segment || '—') + '</td>'
                + '<td>' + statusBadge(r.status) + '</td>'
                + '<td class="col-hide-mobile">' + typeCell(r.type) + '</td>'
                + '<td class="col-hide-mobile">' + customerCell(r) + '</td>'
                + '<td style="text-align:right; white-space:nowrap;">' + actionsCell(r) + '</td>'
                + '</tr>';
        });
        tbody.innerHTML = html;
    }

    function tick() {
        if (paused) return;
        fetch('/api/network/devices', { credentials: 'same-origin' })
            .then(function(r) { return r.ok ? r.json() : null; })
            .then(function(d) {
                if (!d || !d.devices) return;
                render(d.devices);
                document.getElementById('n-last-updated').textContent =
                    'updated ' + new Date().toLocaleTimeString();
            })
            .catch(function() { /* transient — next tick recovers */ });
    }

    // ---- Modal control -------------------------------------------------
    function showModal() { modal.hidden = false; document.body.style.overflow = 'hidden'; paused = true; }
    window.closeResModal = function() {
        modal.hidden = true; document.body.style.overflow = ''; paused = false;
        tick();  // refresh immediately on close
    };

    function setMode(opts) {
        document.getElementById('res-modal-title').textContent = opts.title;
        document.getElementById('res-modal-desc').innerHTML = opts.desc;
        document.getElementById('res-f-submit').textContent = opts.submit;
        form.action = opts.action;
        var fLabel = document.getElementById('res-f-label');
        var fMac   = document.getElementById('res-f-mac');
        var fIp    = document.getElementById('res-f-ip');
        fLabel.value = opts.label || '';
        fMac.value   = opts.mac   || '';
        fIp.value    = opts.ip    || '';
        fMac.readOnly = !!opts.macReadonly;
        fIp.readOnly  = !!opts.ipReadonly;
        showModal();
        setTimeout(function() {
            var focusEl = opts.macReadonly ? fLabel : fMac;
            if (!opts.ipReadonly && !opts.macReadonly && opts.ip === undefined) focusEl = fMac;
            focusEl.focus();
        }, 50);
    }

    window.openAddReservation = function() {
        setMode({
            title: 'Add reservation', submit: 'Add reservation',
            action: '/network/reservation/add',
            desc: 'Bind a MAC address to a fixed IP so this device always gets the '
                + 'same address. Reserved IPs must be <strong>outside</strong> the '
                + 'customer DHCP pool (e.g. <code>10.0.10.253</code> for an ESP controller).'
        });
    };

    function openPin(mac, ip, host) {
        setMode({
            title: 'Make Static', submit: 'Pin to ' + ip,
            action: '/network/reservation/pin',
            mac: mac, macReadonly: true,
            ip: ip, ipReadonly: true,
            label: host,
            desc: 'This pins <code>' + escapeHtml(mac) + '</code> to its current IP '
                + '<code>' + escapeHtml(ip) + '</code>. The device keeps this address '
                + 'from now on and it won\'t be handed to anyone else. Takes effect on '
                + 'the next DHCP renewal.'
        });
    }

    function openReserve(mac, host) {
        setMode({
            title: 'Reserve device', submit: 'Add reservation',
            action: '/network/reservation/add',
            mac: mac, macReadonly: true,
            label: host, ip: '',
            desc: 'Give <code>' + escapeHtml(mac) + '</code> a fixed IP. Pick an address '
                + '<strong>outside</strong> the customer DHCP pool (e.g. '
                + '<code>10.0.10.253</code> for an ESP controller).'
        });
    }

    function openEdit(id, mac, ip, label) {
        setMode({
            title: 'Edit reservation', submit: 'Save changes',
            action: '/network/reservation/' + encodeURIComponent(id) + '/edit',
            mac: mac, ip: ip, label: label,
            desc: 'Change the MAC, IP, or label for this reservation. The new IP must '
                + 'be outside the customer DHCP pool.'
        });
    }

    function removeReservation(id, name) {
        if (!confirm('Remove reservation for ' + name + '? The device falls back to a '
                   + 'dynamic IP on its next renewal.')) return;
        var f = document.getElementById('res-delete-form');
        f.action = '/network/reservation/' + encodeURIComponent(id) + '/delete';
        f.submit();
    }

    function releaseLease(mac, ip, name) {
        if (!confirm('Release the ' + ip + ' lease for ' + name + '?\n\n'
                   + 'The device keeps this IP until it reconnects or its lease '
                   + 'renews, then it gets a fresh one — its reservation, if you '
                   + 'set one. dnsmasq restarts briefly (DNS blips for a second; '
                   + 'the main LAN and internet are unaffected).')) return;
        var f = document.getElementById('lease-release-form');
        f.querySelector('input[name=mac]').value = mac;
        f.submit();
    }

    // Event delegation: action buttons are re-rendered every tick, so listen
    // on the tbody (which is stable) rather than on the buttons themselves.
    document.getElementById('n-tbody').addEventListener('click', function(e) {
        var btn = e.target.closest('button[data-act]');
        if (!btn) return;
        var act = btn.getAttribute('data-act');
        if (act === 'pin') {
            openPin(btn.getAttribute('data-mac'), btn.getAttribute('data-ip'),
                    btn.getAttribute('data-host'));
        } else if (act === 'reserve') {
            openReserve(btn.getAttribute('data-mac'), btn.getAttribute('data-host'));
        } else if (act === 'edit') {
            openEdit(btn.getAttribute('data-id'), btn.getAttribute('data-mac'),
                     btn.getAttribute('data-ip'), btn.getAttribute('data-label'));
        } else if (act === 'remove') {
            removeReservation(btn.getAttribute('data-id'), btn.getAttribute('data-name'));
        } else if (act === 'release') {
            releaseLease(btn.getAttribute('data-mac'), btn.getAttribute('data-ip'),
                         btn.getAttribute('data-name'));
        }
    });

    // ---- Sub-vendo segment modals (P1.5a) ------------------------------
    var segModal    = document.getElementById('seg-modal');
    var segDelModal = document.getElementById('seg-del-modal');
    var segForm     = document.getElementById('seg-form');

    function updateSegPreview() {
        var v = parseInt(document.getElementById('seg-f-vlan').value, 10);
        var ok = !isNaN(v) && v >= 11 && v <= 254;
        var sub = document.getElementById('seg-preview-subnet');
        var gw  = document.getElementById('seg-preview-gw');
        var ifc = document.getElementById('seg-preview-iface');
        if (ok) {
            sub.textContent = '10.0.' + v + '.0/24';
            gw.textContent  = '10.0.' + v + '.1';
            ifc.textContent = 'eth0.' + v;
        } else {
            sub.textContent = '—'; gw.textContent = '—'; ifc.textContent = '—';
        }
    }

    window.openAddSegment = function() {
        segForm.reset();
        updateSegPreview();
        segModal.hidden = false;
        document.body.style.overflow = 'hidden';
        paused = true;
        setTimeout(function() { document.getElementById('seg-f-vlan').focus(); }, 50);
    };
    window.closeSegModal = function() {
        segModal.hidden = true; document.body.style.overflow = ''; paused = false;
        tick();
    };

    document.getElementById('seg-f-vlan').addEventListener('input', updateSegPreview);

    window.openSegDelete = function(vlan, subnet, online) {
        document.getElementById('seg-del-title').textContent = 'Delete VLAN ' + vlan + '?';
        document.getElementById('seg-del-desc').innerHTML =
            'This removes sub-vendo segment <strong>VLAN ' + escapeHtml(String(vlan))
            + '</strong> (<code>' + escapeHtml(subnet) + '</code>) — its DHCP, captive '
            + 'portal, and VLAN interface. Your main LAN and internet are not affected.';
        var n = parseInt(online, 10) || 0;
        var warn = document.getElementById('seg-del-warn');
        warn.textContent = n > 0
            ? '⚠ ' + n + ' customer' + (n === 1 ? '' : 's')
              + ' currently online on this segment will be disconnected.'
            : '';
        document.getElementById('seg-del-form').action =
            '/network/segment/' + encodeURIComponent(vlan) + '/delete';
        // Re-arm the type-to-confirm guard: blank the field + disable the button
        // on every open, then focus so the operator can type immediately.
        var confirmInput = document.getElementById('seg-del-confirm');
        confirmInput.value = '';
        document.getElementById('seg-del-submit').disabled = true;
        segDelModal.hidden = false;
        document.body.style.overflow = 'hidden';
        paused = true;
        setTimeout(function() { confirmInput.focus(); }, 50);
    };
    window.closeSegDelModal = function() {
        segDelModal.hidden = true; document.body.style.overflow = ''; paused = false;
        tick();
    };

    // Enable "Delete segment" only once the operator types "delete" (case- and
    // space-insensitive). Guard submit too, so Enter can't bypass the disabled
    // button — deleting a VLAN is destructive + irreversible.
    document.getElementById('seg-del-confirm').addEventListener('input', function() {
        document.getElementById('seg-del-submit').disabled =
            this.value.trim().toLowerCase() !== 'delete';
    });
    document.getElementById('seg-del-form').addEventListener('submit', function(e) {
        if (document.getElementById('seg-del-confirm').value.trim().toLowerCase() !== 'delete') {
            e.preventDefault();
        }
    });

    // Segment Delete buttons are server-rendered (stable); delegate at the
    // document level so it works regardless of re-render.
    document.addEventListener('click', function(e) {
        var btn = e.target.closest('button[data-seg-del]');
        if (!btn) return;
        openSegDelete(btn.getAttribute('data-seg-del'),
                      btn.getAttribute('data-subnet'),
                      btn.getAttribute('data-online'));
    });

    // ---- Edit segment DHCP pool modal (P1.5b) --------------------------
    var segPoolModal = document.getElementById('seg-pool-modal');
    var segPoolForm  = document.getElementById('seg-pool-form');
    var segPoolVlan  = null;

    function updateSegPoolPreview() {
        var s = parseInt(document.getElementById('seg-pool-start').value, 10);
        var e = parseInt(document.getElementById('seg-pool-end').value, 10);
        var prev = document.getElementById('seg-pool-preview');
        var net = '10.0.' + segPoolVlan + '.';
        var okS = !isNaN(s) && s >= 2 && s <= 254;
        var okE = !isNaN(e) && e >= 2 && e <= 254;
        if (okS && okE) {
            prev.textContent = net + s + ' – ' + net + e
                + (e < s ? '   (end is below start!)' : '');
        } else {
            prev.textContent = '—';
        }
    }

    window.openSegPool = function(vlan, pstart, pend) {
        segPoolVlan = parseInt(vlan, 10);
        var net = '10.0.' + segPoolVlan + '.';
        document.getElementById('seg-pool-title').textContent =
            'Edit DHCP pool — VLAN ' + segPoolVlan;
        document.getElementById('seg-pool-net').textContent   = net;
        document.getElementById('seg-pool-net-a').textContent = net;
        document.getElementById('seg-pool-net-b').textContent = net;
        document.getElementById('seg-pool-start').value = pstart;
        document.getElementById('seg-pool-end').value   = pend;
        segPoolForm.action =
            '/network/segment/' + encodeURIComponent(segPoolVlan) + '/pool';
        updateSegPoolPreview();
        segPoolModal.hidden = false;
        document.body.style.overflow = 'hidden';
        paused = true;
        setTimeout(function() { document.getElementById('seg-pool-start').focus(); }, 50);
    };
    window.closeSegPoolModal = function() {
        segPoolModal.hidden = true; document.body.style.overflow = ''; paused = false;
        tick();
    };

    document.getElementById('seg-pool-start').addEventListener('input', updateSegPoolPreview);
    document.getElementById('seg-pool-end').addEventListener('input', updateSegPoolPreview);

    document.addEventListener('click', function(e) {
        var btn = e.target.closest('button[data-seg-pool]');
        if (!btn) return;
        openSegPool(btn.getAttribute('data-seg-pool'),
                    btn.getAttribute('data-pstart'),
                    btn.getAttribute('data-pend'));
    });

    // ---- Edit segment bandwidth modal (P1.5c) --------------------------
    var segBwModal = document.getElementById('seg-bw-modal');
    var segBwForm  = document.getElementById('seg-bw-form');
    // [canonical BW key, input id]; the unit <select> id is <input id>-unit.
    var SEG_BW_FIELDS = [
        ['per_client_down_kbps', 'seg-bw-pcd'],
        ['per_client_up_kbps',   'seg-bw-pcu'],
        ['total_down_kbps',      'seg-bw-td'],
        ['total_up_kbps',        'seg-bw-tu'],
    ];

    function _unitLabel(u) {
        return u === 'mbps' ? 'Mbps' : 'Kbps';
    }

    window.openSegBw = function(vlan, bwJson) {
        var v = parseInt(vlan, 10);
        var bw = {};
        try { bw = JSON.parse(bwJson) || {}; } catch (err) { bw = {}; }
        document.getElementById('seg-bw-title').textContent = 'Edit bandwidth — VLAN ' + v;
        SEG_BW_FIELDS.forEach(function(f) {
            var cap   = bw[f[0]] || {};
            var input = document.getElementById(f[1]);
            var unit  = document.getElementById(f[1] + '-unit');
            var eff = cap.effective || {value: 0, unit: 'kbps'};
            var ov  = cap.override;   // null when this cap inherits the global
            if (cap.custom && ov) {
                input.value = ov.value;
                unit.value  = ov.unit;
            } else {
                input.value = '';
                unit.value  = eff.unit;
            }
            input.placeholder = eff.value
                ? ('inherit (' + eff.value + ' ' + _unitLabel(eff.unit) + ')')
                : 'inherit (no limit)';
        });
        segBwForm.action = '/network/segment/' + encodeURIComponent(v) + '/bandwidth';
        segBwModal.hidden = false;
        document.body.style.overflow = 'hidden';
        paused = true;
        setTimeout(function() { document.getElementById('seg-bw-pcd').focus(); }, 50);
    };
    window.closeSegBwModal = function() {
        segBwModal.hidden = true; document.body.style.overflow = ''; paused = false;
        tick();
    };

    document.addEventListener('click', function(e) {
        var btn = e.target.closest('button[data-seg-bw]');
        if (!btn) return;
        openSegBw(btn.getAttribute('data-seg-bw'), btn.getAttribute('data-bw'));
    });

    document.addEventListener('keydown', function(e) {
        if (e.key !== 'Escape') return;
        if (!modal.hidden) closeResModal();
        else if (!segModal.hidden) closeSegModal();
        else if (!segDelModal.hidden) closeSegDelModal();
        else if (!segPoolModal.hidden) closeSegPoolModal();
        else if (!segBwModal.hidden) closeSegBwModal();
    });

    // If the server bounced us back with a validation error, surface the right
    // modal so the operator can retry — EXCEPT the cases below, which only show
    // the flash banner (modal stays CLOSED so the error splash is visible):
    //   - pool/bandwidth errors (seg_pool_* / seg_bw_*): we don't know which row
    //     to reopen; the operator re-clicks Edit pool / Edit bandwidth.
    //   - "VLAN unavailable" errors (taken / conflicts with PPPoE-or-mgmt /
    //     subnet overlap): the operator must pick a DIFFERENT VLAN, so closing
    //     the modal to show the error reads clearer than reopening it with the
    //     same (rejected) VLAN sitting behind the splash.
    {% if error_key and (error_key.startswith('seg_pool_') or error_key.startswith('seg_bw_')
            or error_key in ['seg_vlan_taken', 'seg_vlan_conflict', 'seg_overlap']) %}
        /* banner only — see comment above */
    {% elif error_key and error_key.startswith('seg_') %}
        document.addEventListener('DOMContentLoaded', function() { openAddSegment(); });
    {% elif error_key and error_key.startswith('res_') %}
        document.addEventListener('DOMContentLoaded', function() {
            // Reservation-form error — surface the Add modal so they can retry.
            // Scoped to res_* so the relocated LAN errors (dns_/lan_subnet_/
            // dhcp_pool_) and lease_* errors only show the flash banner.
            openAddReservation();
        });
    {% endif %}

    // ============================================================
    // Sub-vendo fleet health (multi-vendo P5) — ESP reachability +
    // status + active grant sessions, polled less often than devices.
    // ============================================================
    var FLEET_POLL_MS = 10000;
    var ROSAPI_USER = {{ (rosapi_user or 'vendora') | tojson }};

    function fmtUptime(s) {
        s = parseInt(s, 10) || 0;
        var m = Math.floor(s / 60), h = Math.floor(m / 60), d = Math.floor(h / 24);
        if (d > 0) return d + 'd ' + (h % 24) + 'h';
        if (h > 0) return h + 'h ' + (m % 60) + 'm';
        if (m > 0) return m + 'm';
        return s + 's';
    }

    function renderFleet(subs) {
        var c = document.getElementById('fleet-container');
        if (!c) return;
        // Preserve which VLAN "Pair an ESP" expanders are open across the 10s
        // re-render — innerHTML replace would otherwise collapse them.
        var openVlans = {};
        c.querySelectorAll('details[data-vlan]').forEach(function(d) {
            if (d.open) openVlans[d.getAttribute('data-vlan')] = true;
        });
        if (!subs || subs.length === 0) {
            c.innerHTML = '<div class="empty-state">No sub-vendos configured.</div>';
            return;
        }
        var html = '';
        subs.forEach(function(s) {
            var esp = s.esp || {};
            var badge = s.reachable
                ? '<span class="badge badge-active">ESP online</span>'
                : '<span class="badge badge-expired">ESP offline</span>';
            var lic = (esp.licensed === true) ? ' <span class="badge badge-active">licensed</span>'
                    : (esp.licensed === false) ? ' <span class="badge badge-expired">unlicensed</span>' : '';
            var line = s.reachable
                ? (escapeHtml(esp.vendoName || '—') + ' · ' + escapeHtml(esp.firmware || '')
                   + ' · up ' + fmtUptime(esp.uptime)
                   + (esp.busy ? ' · <strong style="color:var(--warn-text);">busy</strong>' : ''))
                : ('ESP at ' + escapeHtml(s.esp_ip || '?') + ' not responding');
            var grants = s.grants || [];
            var connected = (grants.length === 1) ? '1 customer connected'
                                                  : grants.length + ' customers connected';
            html += '<div class="card" style="margin-bottom:10px;">'
                + '<div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;">'
                + '<div><strong>VLAN ' + s.vlan + '</strong> <code>' + escapeHtml(s.subnet) + '</code></div>'
                + '<div>' + badge + lic + '</div></div>'
                + '<div style="color:var(--muted); font-size:13px; margin-top:6px;">' + line + '</div>'
                + '<div style="margin-top:10px;"><span class="badge ' + (grants.length ? 'badge-active' : 'badge-expired') + '">' + connected + '</span>'
                + ' <a href="/esp-vouchers" style="font-size:12px;">manage ESP Vouchers &rarr;</a></div>'
                + '<details' + (openVlans[s.vlan] ? ' open' : '') + ' data-vlan="' + s.vlan + '" style="margin-top:12px;"><summary style="cursor:pointer; font-size:13px; color:var(--primary-700); font-weight:600;">Pair an ESP to this VLAN</summary>'
                + '<div class="card" style="background:var(--primary-light); margin-top:8px; font-size:13px; line-height:1.9;">'
                + 'On the ESP\'s config page, set:<br>'
                + '&bull; SBC IP <code>' + escapeHtml(s.gateway) + '</code> &middot; API port <code>8728</code><br>'
                + '&bull; API username <code>' + escapeHtml(ROSAPI_USER || 'vendora') + '</code> &middot; API password = the one you configured<br>'
                + '&bull; hotspot / user / server profile names: leave default<br>'
                + '&bull; Then on the ESP <strong>Tools</strong> page, click <strong>Test Router</strong> to pair'
                + '</div></details>'
                + '</div>';
        });
        c.innerHTML = html;
    }

    function fleetTick() {
        fetch('/api/network/sub-vendos', { credentials: 'same-origin' })
            .then(function(r) { return r.ok ? r.json() : null; })
            .then(function(d) {
                if (!d || !d.sub_vendos) return;
                renderFleet(d.sub_vendos);
                var u = document.getElementById('fleet-updated');
                if (u) u.textContent = 'updated ' + new Date().toLocaleTimeString();
            })
            .catch(function() { /* transient — next tick recovers */ });
    }

    tick();
    setInterval(tick, POLL_MS);
    if (document.getElementById('fleet-container')) {
        fleetTick();
        setInterval(fleetTick, FLEET_POLL_MS);
    }
})();
</script>

{% endblock %}