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

<h1>System</h1>
<p class="page-subtitle">
    Hostname, uptime, WAN status, and service health.
</p>

{% if flash_msg %}
    <div class="flash flash-good">
        {{ flash_msg }}{% if flash_extra %} <code>{{ flash_extra }}</code>{% endif %}
        <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 %}

{% if data.wan_collision and data.wan_collision.collision %}
<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;">
        ⚠ Your internet and your customer network are on the same IP range
    </div>
    <p style="margin:0 0 10px; font-size:13px; line-height:1.55;">
        Your modem gave the internet port (WAN) <code>{{ data.wan_collision.wan_ip }}</code>,
        which overlaps
        {% for c in data.wan_collision.conflicts %}<code>{{ c.subnet }}</code> ({{ c.label }}){% if not loop.last %}, {% endif %}{% endfor %}.
        With the same range on both sides the SBC can't reach the internet — so no
        customer can either. Change your customer LAN subnet to a different range
        (for example <code>10.0.20.0/24</code>).
    </p>
    <a href="/network#lan-subnet" style="display:inline-block; font-weight:700; color:#92400e; text-decoration:underline;">Change LAN subnet →</a>
</div>
{% endif %}

<div class="page-actions">
    <form method="POST" action="/system/reboot" style="display: inline;"
          onsubmit="return confirm('Reboot the SBC now? Customers connected to WiFi will lose access for 30–60 seconds.');">
        <button type="submit" class="btn-danger">↻ Reboot SBC</button>
    </form>
</div>

{# Top quick stats: hostname, uptime, WAN mode, internet reachability #}
<div class="stat-grid">
    <div class="stat-card">
        <div class="label">Hostname</div>
        <div class="value" style="font-size: 18px;">{{ data.hostname }}</div>
        <div class="hint">{{ data.kernel }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Uptime</div>
        <div class="value">{{ data.uptime }}</div>
        <div class="hint">since last boot</div>
    </div>
    <div class="stat-card {{ 'good' if data.wan.link_up else '' }}">
        <div class="label">WAN Mode</div>
        <div class="value" style="text-transform: uppercase; font-size: 18px;">
            {{ data.wan.mode }}
        </div>
        <div class="hint">
            {% if data.wan.link_up %}eth0 connected{% else %}eth0 {{ data.wan.link_state }}{% endif %}
        </div>
    </div>
    <div class="stat-card {{ 'good' if data.internet_ok else '' }}">
        <div class="label">Internet</div>
        <div class="value" style="font-size: 18px;">
            {% if data.internet_ok %}Reachable{% else %}Unreachable{% endif %}
        </div>
        <div class="hint">ping 1.1.1.1 (2s timeout)</div>
    </div>
</div>

<section>
    <h2>WAN (eth0)</h2>
    <div class="card">
        <table style="width: 100%; border: none;">
            <tr>
                <th style="text-align: left; width: 30%;">Active profile</th>
                <td>
                    {% if data.wan.profile %}
                        <code>{{ data.wan.profile }}</code>
                    {% else %}
                        <span style="color: var(--muted-2);">— (no eth0 profile active)</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th style="text-align: left;">Address</th>
                <td>
                    {% if data.wan.address %}
                        <code>{{ data.wan.address }}</code>
                    {% else %}
                        <span style="color: var(--muted-2);">—</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th style="text-align: left;">Gateway</th>
                <td>
                    {% if data.wan.gateway %}
                        <code>{{ data.wan.gateway }}</code>
                    {% else %}
                        <span style="color: var(--muted-2);">—</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th style="text-align: left;">DNS</th>
                <td>
                    {% if data.wan.dns %}
                        {% for ip in data.wan.dns %}
                            <code>{{ ip }}</code>{% if not loop.last %}, {% endif %}
                        {% endfor %}
                    {% else %}
                        <span style="color: var(--muted-2);">—</span>
                    {% endif %}
                </td>
            </tr>
        </table>
    </div>
</section>

<section>
    <h2>WAN Mode Editor</h2>
    <div class="card">
        <p class="card-desc">
            Switch between DHCP, Static, or PPPoE. Applies immediately; if it breaks
            the internet this admin page stays reachable so you can fix it.
        </p>

        <form id="wan-form" method="POST" action="/system/wan" class="edit-form">
            <div class="wan-modes">
                {% set current_mode = data.wan.mode %}
                <label class="wan-mode-option">
                    <input type="radio" name="mode" value="dhcp"
                           {% if current_mode == 'dhcp' %}checked{% endif %}
                           onchange="updateWanFields()">
                    <strong>DHCP</strong>
                    <span class="wan-mode-hint">Get address from the upstream router (most common).</span>
                </label>
                <label class="wan-mode-option">
                    <input type="radio" name="mode" value="static"
                           {% if current_mode == 'static' %}checked{% endif %}
                           onchange="updateWanFields()">
                    <strong>Static</strong>
                    <span class="wan-mode-hint">Manual IP / gateway / DNS. Use when the ISP gave you a fixed address.</span>
                </label>
                <label class="wan-mode-option">
                    <input type="radio" name="mode" value="pppoe"
                           {% if current_mode == 'pppoe' %}checked{% endif %}
                           onchange="updateWanFields()">
                    <strong>PPPoE</strong>
                    <span class="wan-mode-hint">Dial-up over Ethernet (PLDT / Converge / Globe fiber, etc.).</span>
                </label>
            </div>

            <fieldset id="wan-fields-static" class="wan-fields" style="display: none;">
                <legend>Static IPv4 settings</legend>
                <div class="form-grid">
                    <div>
                        <label>Address (CIDR)</label>
                        <input type="text" name="address"
                               placeholder="e.g. 192.168.1.100/24"
                               value="{{ data.wan_static.address or '' }}">
                    </div>
                    <div>
                        <label>Gateway</label>
                        <input type="text" name="gateway"
                               placeholder="e.g. 192.168.1.1"
                               value="{{ data.wan_static.gateway or '' }}">
                    </div>
                    <div style="grid-column: 1 / -1;">
                        <label>DNS (comma-separated)</label>
                        <input type="text" name="dns"
                               placeholder="e.g. 1.1.1.1, 8.8.8.8"
                               value="{{ data.wan_static.dns or '' }}">
                    </div>
                </div>
            </fieldset>

            <fieldset id="wan-fields-pppoe" class="wan-fields" style="display: none;">
                <legend>PPPoE credentials</legend>
                <div class="form-grid">
                    <div>
                        <label>Username</label>
                        <input type="text" name="username" autocomplete="username"
                               placeholder="e.g. user@isp.com"
                               value="{{ data.wan_pppoe.username or '' }}">
                    </div>
                    <div>
                        <label>Password</label>
                        <input type="password" name="password" autocomplete="current-password"
                               placeholder="{% if data.wan_pppoe.username %}(re-enter to update){% else %}from your ISP{% endif %}">
                    </div>
                </div>
                <p class="form-hint">
                    Password is stored encrypted in the system network configuration
                    (root-owned, mode 600). Audit log records the username on every change
                    but <strong>never</strong> the password.
                </p>
            </fieldset>

            <div class="form-actions">
                <button type="submit" class="btn-primary"
                        onclick="return confirmWanApply()">Apply WAN Configuration</button>
            </div>
        </form>
    </div>
</section>

{# ============================================================ #}
{# Timezone (post-1.5.2)                                          #}
{# Drives every "Asia/Manila"-style local-time display + the      #}
{# sales-day rollover. Fresh flashes bake Asia/Manila; operators  #}
{# can change here for a deployed device.                         #}
{# ============================================================ #}
<section>
    <h2>Timezone</h2>
    <div class="card">
        <p class="card-desc">
            Sets the local clock for displays + the sales day rollover. Current: <code>{{ data.timezone.current }}</code>.
        </p>
        <form method="post" action="/system/timezone" class="form-grid" style="margin-top: 8px;">
            <div class="col-span-all">
                <label for="tz">Timezone</label>
                <select name="timezone" id="tz" style="width: 100%; max-width: 480px;">
                    {% for tz, label in data.timezone.options %}
                    <option value="{{ tz }}"
                        {% if tz == data.timezone.current %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                    {% if data.timezone.is_custom %}
                    <option value="{{ data.timezone.current }}" selected>{{ data.timezone.current }} (current — custom)</option>
                    {% endif %}
                </select>
                <p class="form-hint" style="margin-top: 6px;">
                    Saving restarts the portal + admin briefly to load the new zone. Customer sessions stay authorized.
                </p>
            </div>
            <div class="col-span-all" style="margin-top: 12px;">
                <button type="submit" class="btn btn-primary">Save timezone</button>
            </div>
        </form>
    </div>
</section>

{# ============================================================ #}
{# Remote Access (ADR-0022 part 2) — admin from the WAN, toggle  #}
{# ============================================================ #}
<section>
    <h2>Remote Access</h2>
    <div class="card">
        <p class="card-desc">
            Let the admin be reached from your internet (WAN) network — e.g. your modem's LAN — instead of only the customer network. For safety this only works when your WAN is a private network; it stays off on a public internet address.
        </p>

        {% if data.wan_admin.active and data.wan_admin.reason == 'degraded' %}
        <div style="background:#78350f;color:#fde68a;border:1px solid #b45309;border-radius:10px;padding:10px 14px;margin:8px 0;font-size:13px;">
            ⚠ Remote admin is currently open automatically because the customer LAN port is missing (recovery mode) — reachable at <code style="background:#451a03;padding:1px 6px;border-radius:4px;">{{ data.wan_admin.url }}</code>. It closes on its own when the port is back, independent of the toggle below.
        </div>
        {% elif data.wan_admin.enabled and data.wan_admin.active %}
        <div style="background:#0c4a6e;color:#bae6fd;border:1px solid #0369a1;border-radius:10px;padding:10px 14px;margin:8px 0;font-size:13px;">
            🛟 Reachable now at <code style="background:#082f49;padding:1px 6px;border-radius:4px;font-weight:700;">{{ data.wan_admin.url }}</code> from your modem's network. Turn this OFF when you're done.
        </div>
        {% elif data.wan_admin.blocked %}
        <div style="background:#7f1d1d;color:#fecaca;border:1px solid #b91c1c;border-radius:10px;padding:10px 14px;margin:8px 0;font-size:13px;">
            🔒 Turned ON, but your internet address{% if data.wan_admin.wan_ip %} (<code style="background:#450a0a;padding:1px 6px;border-radius:4px;">{{ data.wan_admin.wan_ip }}</code>){% endif %} is public, so remote admin is BLOCKED for safety — the admin login is never exposed to the internet. It switches on automatically if the box is ever on a private modem network.
        </div>
        {% endif %}

        <form method="POST" action="/system/wan-admin" class="form-grid" style="margin-top:8px;"
              onsubmit="return confirm({% if data.wan_admin.enabled %}'Turn OFF remote admin? The admin will be reachable only from the customer LAN again.'{% else %}'Turn ON remote admin from the WAN?\n\nThe admin login becomes reachable from your modem network (private WAN only — blocked on a public IP). It stays on until you turn it off. Services restart briefly.'{% endif %});">
            <input type="hidden" name="enabled" value="{{ 'off' if data.wan_admin.enabled else 'on' }}">
            <div class="col-span-all">
                <span style="font-weight:600;">Status: </span>
                {% if data.wan_admin.enabled %}<span style="color:var(--good,#16a34a);font-weight:700;">ON</span>{% else %}<span style="color:var(--muted-2);font-weight:700;">OFF</span> (admin is LAN-only){% endif %}
            </div>
            <div class="col-span-all" style="margin-top:12px;">
                <button type="submit" class="btn-{{ 'danger' if data.wan_admin.enabled else 'primary' }}">
                    {{ 'Turn off remote admin' if data.wan_admin.enabled else 'Turn on remote admin' }}
                </button>
            </div>
        </form>

        <hr style="border:none;border-top:1px solid var(--border);margin:18px 0;">

        <p class="card-desc">
            Sub-vendo and PPPoE customers are on separate networks from your own. By default they can't open this admin — only buy WiFi (their portal) and, for ESPs, pair. Turn this on only if you manage the box from one of those networks.
        </p>
        {% if not data.sub_vendo_admin.has_segments %}
        <p class="form-hint" style="margin:6px 0;">No sub-vendos or PPPoE configured yet, so this has no effect right now.</p>
        {% endif %}
        <form method="POST" action="/system/sub-vendo-admin" class="form-grid" style="margin-top:8px;"
              onsubmit="return confirm({% if data.sub_vendo_admin.allowed %}'Block sub-vendo / PPPoE customers from the admin again? (Recommended.)'{% else %}'Allow sub-vendo / PPPoE customers to reach the admin login?\n\nThey are customers of other operators / wired subscribers — only turn this on if YOU manage the box from one of those networks. Services restart briefly.'{% endif %});">
            <input type="hidden" name="enabled" value="{{ 'off' if data.sub_vendo_admin.allowed else 'on' }}">
            <div class="col-span-all">
                <span style="font-weight:600;">Sub-vendo / PPPoE admin access: </span>
                {% if data.sub_vendo_admin.allowed %}<span style="color:var(--warn,#d97706);font-weight:700;">ALLOWED</span>{% else %}<span style="color:var(--good,#16a34a);font-weight:700;">BLOCKED</span> (recommended){% endif %}
            </div>
            <div class="col-span-all" style="margin-top:12px;">
                <button type="submit" class="btn-{{ 'primary' if data.sub_vendo_admin.allowed else 'secondary' }}">
                    {{ 'Block sub-vendo admin access' if data.sub_vendo_admin.allowed else 'Allow sub-vendo admin access' }}
                </button>
            </div>
        </form>
    </div>
</section>

{# ============================================================ #}
{# Updates (OTA) — v1.x SBC-side UX                              #}
{# Check + install vendora-sbc package updates from the apt repo #}
{# at apt.vendorawifi.com. Trust chain baked at image build.     #}
{# ============================================================ #}
<section>
    <h2>Updates</h2>
    <div class="card">
        <p class="card-desc">
            Check for and install Vendora SBC updates. Only updates signed by Vendora are accepted.
        </p>

        <div class="form-grid" style="margin-top: 8px;">
            <div>
                <label>Installed version</label>
                <div style="font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; font-weight: 600; padding: 8px 0;">
                    v{{ data.current_version }}
                </div>
            </div>
            <div>
                <label>Last checked</label>
                <div style="padding: 8px 0; font-size: 13px;">
                    {% if data.ota.last_check_at %}
                        {{ data.ota.last_check_at | localtime }}
                    {% else %}
                        <span style="color: var(--muted);">— never checked</span>
                    {% endif %}
                </div>
            </div>
        </div>

        {# Result summary based on last check #}
        {% if data.ota.result == "update_available" and data.ota.available_version %}
            <div class="flash flash-info" style="margin: 12px 0;">
                <div>
                    <strong>Update available:</strong>
                    v{{ data.current_version }} → <strong>v{{ data.ota.available_version }}</strong>.
                    Click Install Update Now to apply it. Services restart
                    briefly during the install; customer sessions may see a
                    1–2 second blip.
                </div>
            </div>
        {% elif data.ota.result == "up_to_date" %}
            <div class="flash flash-good" style="margin: 12px 0;">
                <div>
                    <strong>Up to date.</strong>
                    Installed version v{{ data.current_version }} is the
                    current release.
                </div>
            </div>
        {% elif data.ota.result == "installing" %}
            <div class="flash flash-info" style="margin: 12px 0;">
                <div>
                    <strong>Install in progress.</strong>
                    The most recent update install hasn't finished yet (or
                    its admin restart hasn't completed). Refresh in a few
                    seconds.
                </div>
            </div>
        {% elif data.ota.result == "error" %}
            <div class="flash flash-error" style="margin: 12px 0;">
                <div>
                    <strong>Last check failed:</strong>
                    {{ data.ota.error or "unknown error" }}
                </div>
            </div>
        {% endif %}

        <div class="form-actions">
            <form method="POST" action="/system/check-updates" style="display: inline;">
                <button type="submit" class="btn-secondary">
                    {% if data.ota.result == "never" %}Check for Updates{% else %}Check Again{% endif %}
                </button>
            </form>
            {% if data.ota.result == "update_available" and data.ota.available_version %}
                <form method="POST" action="/system/install-update" style="display: inline;"
                      onsubmit="return confirm('Install Vendora SBC v{{ data.ota.available_version }} now? Services will restart briefly during the install (about 30 seconds). Customer sessions may see a 1–2 second blip.');">
                    <button type="submit" class="btn-primary">
                        Install Update Now (v{{ data.ota.available_version }})
                    </button>
                </form>
            {% endif %}
        </div>
        <p class="card-desc" style="font-size: 12px; color: var(--muted); margin-top: 12px;">
            <strong>Heads up:</strong> Check Updates takes a few seconds. Install
            Update Now applies it in the background and shows a wait screen until it finishes.
        </p>
    </div>
</section>

<!-- LAN settings (subnet / customer DNS / DHCP pool / reservations / AP IP)
     relocated to the Network page so all LAN config lives in one place. -->


<section>
    <h2>GPIO Pin Map</h2>
    <div class="card">
        <p class="card-desc">
            Which GPIO lines this SBC uses for the coin slot. Defaults match the
            standard board — change only for a different custom board.
        </p>
        <p class="card-desc" style="font-size:12px; color:var(--muted);">
            <strong>Heads up:</strong> saving restarts the coin service (the relay
            blips off ~1 s). Don't change pins mid-payment.
        </p>

        <form method="POST" action="/system/gpio-pin-map" class="edit-form"
              onsubmit="return confirm('Save GPIO pin map and restart vendora-coin? Slot will momentarily drop to OFF.');">
            <div class="form-grid">
                <div>
                    <label>Coin pulse input</label>
                    <select name="pulse_line" required>
                        {% for line, label in data.gpio.pulse_options %}
                        <option value="{{ line }}"
                            {% if line == data.gpio.pulse_line %}selected{% endif %}>
                            {{ label }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="form-hint" style="margin-top:4px;">
                        Default: PA{{ data.gpio.pulse_default }} (physical pin
                        {% if data.gpio.pulse_default == 12 %}3
                        {%- elif data.gpio.pulse_default == 7 %}12
                        {%- else %}custom pin{% endif %}).
                    </p>
                </div>
                <div>
                    <label>Coin slot power</label>
                    <select name="slot_power_line" required>
                        {% for line, label in data.gpio.slot_options %}
                        <option value="{{ line }}"
                            {% if line == data.gpio.slot_power_line %}selected{% endif %}>
                            {{ label }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="form-hint" style="margin-top:4px;">
                        Default: PA{{ data.gpio.slot_default }} (physical pin
                        {% if data.gpio.slot_default == 11 %}5
                        {%- elif data.gpio.slot_default == 10 %}35
                        {%- else %}custom pin{% endif %}).
                    </p>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn-primary">Save &amp; Restart Coin Daemon</button>
            </div>
        </form>

        <p class="card-desc" style="margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px;">
            Not sure which pins? Use the <a href="/system/gpio-tools"><strong>GPIO Hardware Tools</strong></a> to find them.
        </p>
    </div>
</section>

<style>
    .wan-modes {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 14px;
    }
    .wan-mode-option {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 12px;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        cursor: pointer;
        transition: border-color 0.12s, background 0.12s;
    }
    .wan-mode-option:hover {
        border-color: var(--primary);
        background: var(--surface-2);
    }
    .wan-mode-option input[type=radio] { flex-shrink: 0; }
    .wan-mode-option strong { color: var(--text); font-size: 14px; }
    .wan-mode-hint {
        color: var(--muted);
        font-size: 12px;
        flex: 1;
    }
    .wan-fields {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 14px 16px;
        margin: 0 0 14px;
    }
    .wan-fields legend {
        padding: 0 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .wan-fields input[type=text],
    .wan-fields input[type=password] {
        width: 100%;
        padding: 10px 12px;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text);
        font-size: 14px;
        font-family: inherit;
    }
    .wan-fields input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-light);
    }
</style>

<script>
function updateWanFields() {
    const selected = document.querySelector('input[name="mode"]:checked');
    const mode = selected ? selected.value : 'dhcp';
    document.getElementById('wan-fields-static').style.display = (mode === 'static') ? '' : 'none';
    document.getElementById('wan-fields-pppoe').style.display = (mode === 'pppoe') ? '' : 'none';
}
function confirmWanApply() {
    const selected = document.querySelector('input[name="mode"]:checked');
    const mode = selected ? selected.value : 'dhcp';
    return confirm('Apply ' + mode.toUpperCase() + ' WAN configuration now? ' +
                   'If something is wrong, internet will be unreachable until you fix it from this admin page.');
}
document.addEventListener('DOMContentLoaded', updateWanFields);
</script>

<section>
    <h2>Services</h2>
    <div class="table-scroll">
        <table>
            <thead>
                <tr>
                    <th>Unit</th>
                    <th>Status</th>
                    <th class="actions-cell">Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for s in data.services %}
                <tr>
                    <td><code>{{ s.unit }}</code></td>
                    <td>
                        {% if s.active == 'active' %}
                            <span class="badge badge-active">active</span>
                        {% elif s.active == 'failed' %}
                            <span class="badge badge-revoked">failed</span>
                        {% elif s.active == 'inactive' %}
                            <span class="badge badge-expired">inactive</span>
                        {% else %}
                            <span class="badge badge-pending">{{ s.active }}</span>
                        {% endif %}
                    </td>
                    <td class="actions-cell">
                        <form method="POST" action="/system/restart-service/{{ s.unit }}"
                              onsubmit="return confirm('Restart {{ s.unit }}?{% if s.unit == 'vendora-admin' %} This admin page will briefly drop and auto-reload.{% endif %}');">
                            <button type="submit" class="btn-sm">Restart</button>
                        </form>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</section>

<section>
    <h2>Resources</h2>
    <div class="stat-grid stat-grid--stack">
        <div class="stat-card">
            <div class="label">CPU</div>
            <div class="value">{{ data.cpu.used_pct }}%</div>
            <div class="hint">{% if data.cpu.temp_c is not none %}{{ data.cpu.temp_c }}&deg;C{% else %}current usage{% endif %}</div>
            <div class="progress"><div class="progress-fill" style="width: {{ data.cpu.used_pct }}%"></div></div>
        </div>
        <div class="stat-card">
            <div class="label">Memory</div>
            <div class="value">{{ data.mem.used_pct }}%</div>
            <div class="hint">{{ data.mem.available_h }} free of {{ data.mem.total_h }}</div>
            <div class="progress"><div class="progress-fill" style="width: {{ data.mem.used_pct }}%"></div></div>
        </div>
        <div class="stat-card">
            <div class="label">Disk</div>
            <div class="value">{{ data.disk.used_pct }}%</div>
            <div class="hint">{{ data.disk.free_h }} free of {{ data.disk.total_h }}</div>
            <div class="progress"><div class="progress-fill" style="width: {{ data.disk.used_pct }}%"></div></div>
        </div>
        {% if data.conntrack %}
        <div class="stat-card">
            <div class="label">Connections</div>
            <div class="value">{{ data.conntrack.pct }}%</div>
            <div class="hint">{{ data.conntrack.count }} / {{ data.conntrack.max }} tracked{% if data.conntrack.pct >= 80 %} · <span style="color:var(--warn-text);">near full</span>{% endif %}</div>
            <div class="progress"><div class="progress-fill" style="width: {{ data.conntrack.pct }}%"></div></div>
        </div>
        {% endif %}
    </div>
</section>

{% endblock %}