{% extends "base.html" %}
{% block title %}Vigilar — Settings{% endblock %}

{% block head %}
<style>
    .settings-nav .nav-link { color: #8b949e; border: none; padding: 0.5rem 1rem; }
    .settings-nav .nav-link.active { color: #fff; background-color: rgba(255,255,255,0.05); border-left: 3px solid #58a6ff; }
    .settings-nav .nav-link:hover { color: #c9d1d9; }
    .settings-section { display: none; }
    .settings-section.active { display: block; }
    .save-indicator { opacity: 0; transition: opacity 0.3s; }
    .save-indicator.show { opacity: 1; }
    .form-label { font-weight: 500; }
    .setting-desc { font-size: 0.8rem; color: #8b949e; margin-top: 0.15rem; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0"><i class="bi bi-gear me-2"></i>Settings</h5>
    <span class="save-indicator text-success" id="save-indicator">
        <i class="bi bi-check-circle me-1"></i>Saved
    </span>
</div>

<div class="row">
    <!-- Settings Navigation -->
    <div class="col-md-3 col-lg-2 mb-3">
        <nav class="nav flex-column settings-nav">
            <a class="nav-link active" href="#" data-section="arm">
                <i class="bi bi-shield-lock me-2"></i>Arm / Disarm
            </a>
            <a class="nav-link" href="#" data-section="cameras">
                <i class="bi bi-camera-video me-2"></i>Cameras
            </a>
            <a class="nav-link" href="#" data-section="motion">
                <i class="bi bi-activity me-2"></i>Motion Detection
            </a>
            <a class="nav-link" href="#" data-section="sensors">
                <i class="bi bi-broadcast me-2"></i>Sensors
            </a>
            <a class="nav-link" href="#" data-section="alerts">
                <i class="bi bi-bell me-2"></i>Notifications
            </a>
            <a class="nav-link" href="#" data-section="storage">
                <i class="bi bi-hdd me-2"></i>Storage
            </a>
            <a class="nav-link" href="#" data-section="ups">
                <i class="bi bi-battery-charging me-2"></i>UPS
            </a>
            <a class="nav-link" href="#" data-section="remote">
                <i class="bi bi-globe me-2"></i>Remote Access
            </a>
            <a class="nav-link" href="#" data-section="network">
                <i class="bi bi-wifi me-2"></i>Network
            </a>
            <a class="nav-link" href="#" data-section="system">
                <i class="bi bi-cpu me-2"></i>System
            </a>
        </nav>
    </div>

    <!-- Settings Content -->
    <div class="col-md-9 col-lg-10">

        <!-- ARM / DISARM -->
        <div class="settings-section active" id="section-arm">
            <div class="card bg-dark border-secondary">
                <div class="card-header"><i class="bi bi-shield-lock me-2"></i>Arm / Disarm</div>
                <div class="card-body">
                    <p class="text-muted mb-3">Control the security system arm state. When armed, sensor and motion events trigger alerts.</p>
                    <div class="d-flex gap-2 mb-3">
                        <button class="btn btn-success btn-lg" onclick="setArmState('DISARMED')">
                            <i class="bi bi-unlock-fill me-1"></i>Disarm
                        </button>
                        <button class="btn btn-warning btn-lg" onclick="setArmState('ARMED_HOME')">
                            <i class="bi bi-house-lock-fill me-1"></i>Arm Home
                        </button>
                        <button class="btn btn-danger btn-lg" onclick="setArmState('ARMED_AWAY')">
                            <i class="bi bi-shield-fill-exclamation me-1"></i>Arm Away
                        </button>
                    </div>
                    <p class="setting-desc">
                        <strong>Disarmed:</strong> No alerts triggered. <strong>Arm Home:</strong> Perimeter sensors active, interior motion ignored.
                        <strong>Arm Away:</strong> All sensors and cameras trigger alerts.
                    </p>
                </div>
            </div>
        </div>

        <!-- CAMERAS -->
        <div class="settings-section" id="section-cameras">
            <div class="card bg-dark border-secondary">
                <div class="card-header"><i class="bi bi-camera-video me-2"></i>Camera Configuration</div>
                <div class="card-body">
                    {% for camera in cameras %}
                    <div class="border border-secondary rounded p-3 mb-3" id="cam-settings-{{ camera.id }}">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0">{{ camera.display_name }}</h6>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="cam-enabled-{{ camera.id }}"
                                       {{ 'checked' if camera.enabled }} data-camera-id="{{ camera.id }}" data-field="enabled">
                                <label class="form-check-label" for="cam-enabled-{{ camera.id }}">Enabled</label>
                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Display Name</label>
                                <input type="text" class="form-control form-control-sm" value="{{ camera.display_name }}"
                                       data-camera-id="{{ camera.id }}" data-field="display_name">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">RTSP URL</label>
                                <input type="text" class="form-control form-control-sm" value="{{ camera.rtsp_url }}"
                                       data-camera-id="{{ camera.id }}" data-field="rtsp_url">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Capture Resolution</label>
                                <select class="form-select form-select-sm" data-camera-id="{{ camera.id }}" data-field="resolution_capture">
                                    <option value="[3840,2160]" {{ 'selected' if camera.resolution_capture == [3840,2160] }}>4K (3840x2160)</option>
                                    <option value="[2560,1440]" {{ 'selected' if camera.resolution_capture == [2560,1440] }}>1440p (2560x1440)</option>
                                    <option value="[1920,1080]" {{ 'selected' if camera.resolution_capture == [1920,1080] }}>1080p (1920x1080)</option>
                                    <option value="[1280,720]" {{ 'selected' if camera.resolution_capture == [1280,720] }}>720p (1280x720)</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Idle FPS</label>
                                <input type="number" class="form-control form-control-sm" value="{{ camera.idle_fps }}"
                                       min="1" max="15" data-camera-id="{{ camera.id }}" data-field="idle_fps">
                                <div class="setting-desc">Frames/sec when no motion</div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Motion FPS</label>
                                <input type="number" class="form-control form-control-sm" value="{{ camera.motion_fps }}"
                                       min="5" max="60" data-camera-id="{{ camera.id }}" data-field="motion_fps">
                                <div class="setting-desc">Frames/sec during motion</div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Retention (days)</label>
                                <input type="number" class="form-control form-control-sm" value="{{ camera.retention_days }}"
                                       min="1" max="365" data-camera-id="{{ camera.id }}" data-field="retention_days">
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" id="cam-motion-{{ camera.id }}"
                                           {{ 'checked' if camera.record_on_motion }}
                                           data-camera-id="{{ camera.id }}" data-field="record_on_motion">
                                    <label class="form-check-label" for="cam-motion-{{ camera.id }}">Record on Motion</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" id="cam-continuous-{{ camera.id }}"
                                           {{ 'checked' if camera.record_continuous }}
                                           data-camera-id="{{ camera.id }}" data-field="record_continuous">
                                    <label class="form-check-label" for="cam-continuous-{{ camera.id }}">Continuous Recording</label>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button class="btn btn-sm btn-primary" onclick="saveCameraSettings('{{ camera.id }}')">
                                <i class="bi bi-check-lg me-1"></i>Save Camera
                            </button>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- MOTION DETECTION -->
        <div class="settings-section" id="section-motion">
            <div class="card bg-dark border-secondary">
                <div class="card-header"><i class="bi bi-activity me-2"></i>Motion Detection</div>
                <div class="card-body">
                    <p class="text-muted mb-3">Adjust motion detection sensitivity per camera. Higher sensitivity detects smaller movements but may trigger false positives.</p>
                    {% for camera in cameras %}
                    <div class="mb-4 pb-3 {{ 'border-bottom border-secondary' if not loop.last }}">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="mb-0">{{ camera.display_name }}</h6>
                            <span class="badge bg-secondary" id="thresh-val-{{ camera.id }}">{{ (camera.motion_sensitivity * 100)|int }}%</span>
                        </div>
                        <label class="form-label small text-muted">Sensitivity</label>
                        <input type="range" class="form-range" min="0" max="100" step="5"
                               value="{{ (camera.motion_sensitivity * 100)|int }}"
                               id="thresh-{{ camera.id }}" data-camera-id="{{ camera.id }}"
                               oninput="updateThresholdLabel(this)">
                        <div class="d-flex justify-content-between">
                            <small class="text-muted">Less sensitive</small>
                            <small class="text-muted">More sensitive</small>
                        </div>

                        <div class="row g-3 mt-1">
                            <div class="col-md-4">
                                <label class="form-label small text-muted">Min Contour Area (px)</label>
                                <input type="number" class="form-control form-control-sm"
                                       value="{{ camera.motion_min_area_px }}" min="0" max="10000" step="50"
                                       data-camera-id="{{ camera.id }}" data-field="motion_min_area_px">
                                <div class="setting-desc">Minimum pixel area to count as motion</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small text-muted">Pre-Motion Buffer (sec)</label>
                                <input type="number" class="form-control form-control-sm"
                                       value="{{ camera.pre_motion_buffer_s }}" min="0" max="30"
                                       data-camera-id="{{ camera.id }}" data-field="pre_motion_buffer_s">
                                <div class="setting-desc">Seconds of video before motion trigger</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small text-muted">Post-Motion Buffer (sec)</label>
                                <input type="number" class="form-control form-control-sm"
                                       value="{{ camera.post_motion_buffer_s }}" min="5" max="120"
                                       data-camera-id="{{ camera.id }}" data-field="post_motion_buffer_s">
                                <div class="setting-desc">Keep recording after motion stops</div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    <button class="btn btn-primary" id="btn-save-thresholds" onclick="saveAllMotionSettings()">
                        <i class="bi bi-check-lg me-1"></i>Save All Motion Settings
                    </button>
                </div>
            </div>
        </div>

        <!-- SENSORS -->
        <div class="settings-section" id="section-sensors">
            <div class="card bg-dark border-secondary">
                <div class="card-header"><i class="bi bi-broadcast me-2"></i>Sensor Configuration</div>
                <div class="card-body">
                    <p class="text-muted mb-3">Sensors are configured in <code>config/vigilar.toml</code>. Sensor management UI coming in a future update.</p>
                    {% if config %}
                    <div class="table-responsive">
                        <table class="table table-dark table-sm">
                            <thead><tr><th>ID</th><th>Name</th><th>Type</th><th>Protocol</th><th>Location</th></tr></thead>
                            <tbody>
                                {% for s in config.sensors %}
                                <tr>
                                    <td><code>{{ s.id }}</code></td>
                                    <td>{{ s.display_name }}</td>
                                    <td><span class="badge bg-secondary">{{ s.type }}</span></td>
                                    <td><span class="badge bg-info">{{ s.protocol }}</span></td>
                                    <td>{{ s.location or '—' }}</td>
                                </tr>
                                {% else %}
                                <tr><td colspan="5" class="text-center text-muted">No sensors configured</td></tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- NOTIFICATIONS -->
        <div class="settings-section" id="section-alerts">
            <div class="card bg-dark border-secondary mb-3">
                <div class="card-header"><i class="bi bi-bell me-2"></i>Push Notifications (PWA)</div>
                <div class="card-body">
                    <p class="text-muted mb-2">Enable push notifications on this device to receive motion alerts.</p>
                    <button class="btn btn-outline-light" id="btn-enable-push" onclick="enablePushNotifications()">
                        <i class="bi bi-bell-fill me-1"></i>Enable Notifications
                    </button>
                    <span id="push-status" class="ms-2 text-muted"></span>
                </div>
            </div>

            {% if config %}
            <div class="card bg-dark border-secondary mb-3">
                <div class="card-header"><i class="bi bi-envelope me-2"></i>Email Alerts</div>
                <div class="card-body">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="email-enabled"
                               {{ 'checked' if config.alerts.email.enabled }}>
                        <label class="form-check-label" for="email-enabled">Enable Email Alerts</label>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">SMTP Host</label>
                            <input type="text" class="form-control form-control-sm" id="email-smtp-host"
                                   value="{{ config.alerts.email.smtp_host }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">SMTP Port</label>
                            <input type="number" class="form-control form-control-sm" id="email-smtp-port"
                                   value="{{ config.alerts.email.smtp_port }}">
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch mt-4">
                                <input class="form-check-input" type="checkbox" id="email-tls"
                                       {{ 'checked' if config.alerts.email.use_tls }}>
                                <label class="form-check-label" for="email-tls">Use TLS</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">From Address</label>
                            <input type="email" class="form-control form-control-sm" id="email-from"
                                   value="{{ config.alerts.email.from_addr }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">To Address</label>
                            <input type="email" class="form-control form-control-sm" id="email-to"
                                   value="{{ config.alerts.email.to_addr }}">
                        </div>
                    </div>
                    <button class="btn btn-sm btn-primary mt-3" onclick="saveAlertSettings('email')">
                        <i class="bi bi-check-lg me-1"></i>Save Email Settings
                    </button>
                </div>
            </div>

            <div class="card bg-dark border-secondary mb-3">
                <div class="card-header"><i class="bi bi-link-45deg me-2"></i>Webhook</div>
                <div class="card-body">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="webhook-enabled"
                               {{ 'checked' if config.alerts.webhook.enabled }}>
                        <label class="form-check-label" for="webhook-enabled">Enable Webhook</label>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label">Webhook URL</label>
                            <input type="url" class="form-control form-control-sm" id="webhook-url"
                                   value="{{ config.alerts.webhook.url }}" placeholder="https://...">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">HMAC Secret</label>
                            <input type="password" class="form-control form-control-sm" id="webhook-secret"
                                   value="{{ config.alerts.webhook.secret }}" placeholder="Optional">
                        </div>
                    </div>
                    <button class="btn btn-sm btn-primary mt-3" onclick="saveAlertSettings('webhook')">
                        <i class="bi bi-check-lg me-1"></i>Save Webhook Settings
                    </button>
                </div>
            </div>

            <div class="card bg-dark border-secondary">
                <div class="card-header"><i class="bi bi-terminal me-2"></i>Local Alerts</div>
                <div class="card-body">
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="local-syslog"
                               {{ 'checked' if config.alerts.local.syslog }}>
                        <label class="form-check-label" for="local-syslog">Log to syslog</label>
                    </div>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="local-desktop"
                               {{ 'checked' if config.alerts.local.desktop_notify }}>
                        <label class="form-check-label" for="local-desktop">Desktop notifications (libnotify)</label>
                    </div>
                    <button class="btn btn-sm btn-primary" onclick="saveAlertSettings('local')">
                        <i class="bi bi-check-lg me-1"></i>Save Local Settings
                    </button>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- STORAGE -->
        <div class="settings-section" id="section-storage">
            <div class="card bg-dark border-secondary">
                <div class="card-header"><i class="bi bi-hdd me-2"></i>Storage</div>
                <div class="card-body">
                    {% if config %}
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Max Disk Usage (GB)</label>
                            <input type="number" class="form-control form-control-sm" id="storage-max-disk"
                                   value="{{ config.storage.max_disk_usage_gb }}" min="10">
                            <div class="setting-desc">Hard cap — oldest recordings pruned when exceeded</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Free Space Floor (GB)</label>
                            <input type="number" class="form-control form-control-sm" id="storage-free-floor"
                                   value="{{ config.storage.free_space_floor_gb }}" min="1">
                            <div class="setting-desc">Always keep this much free on the disk</div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch mt-4">
                                <input class="form-check-input" type="checkbox" id="storage-encrypt"
                                       {{ 'checked' if config.storage.encrypt_recordings }}>
                                <label class="form-check-label" for="storage-encrypt">Encrypt Recordings</label>
                            </div>
                            <div class="setting-desc">AES-256 encryption at rest (.vge files)</div>
                        </div>
                    </div>
                    <div class="row g-3 mt-2">
                        <div class="col-md-6">
                            <label class="form-label">Recordings Directory</label>
                            <input type="text" class="form-control form-control-sm" id="sys-recordings-dir"
                                   value="{{ config.system.recordings_dir }}" readonly>
                            <div class="setting-desc">Change via config file (requires restart)</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Data Directory</label>
                            <input type="text" class="form-control form-control-sm" id="sys-data-dir"
                                   value="{{ config.system.data_dir }}" readonly>
                        </div>
                    </div>
                    <button class="btn btn-primary mt-3" onclick="saveStorageSettings()">
                        <i class="bi bi-check-lg me-1"></i>Save Storage Settings
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- UPS -->
        <div class="settings-section" id="section-ups">
            <div class="card bg-dark border-secondary">
                <div class="card-header"><i class="bi bi-battery-charging me-2"></i>UPS Monitoring (NUT)</div>
                <div class="card-body">
                    {% if config %}
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="ups-enabled"
                               {{ 'checked' if config.ups.enabled }}>
                        <label class="form-check-label" for="ups-enabled">Enable UPS Monitoring</label>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">NUT Host</label>
                            <input type="text" class="form-control form-control-sm" id="ups-host"
                                   value="{{ config.ups.nut_host }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">NUT Port</label>
                            <input type="number" class="form-control form-control-sm" id="ups-port"
                                   value="{{ config.ups.nut_port }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">UPS Name</label>
                            <input type="text" class="form-control form-control-sm" id="ups-name"
                                   value="{{ config.ups.ups_name }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Poll Interval (sec)</label>
                            <input type="number" class="form-control form-control-sm" id="ups-poll"
                                   value="{{ config.ups.poll_interval_s }}" min="5" max="300">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Low Battery Threshold (%)</label>
                            <input type="number" class="form-control form-control-sm" id="ups-low-batt"
                                   value="{{ config.ups.low_battery_threshold_pct }}" min="5" max="95">
                            <div class="setting-desc">Alert when battery drops below this</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Critical Runtime (sec)</label>
                            <input type="number" class="form-control form-control-sm" id="ups-critical-runtime"
                                   value="{{ config.ups.critical_runtime_threshold_s }}" min="60">
                            <div class="setting-desc">Begin shutdown when runtime falls below</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Shutdown Delay (sec)</label>
                            <input type="number" class="form-control form-control-sm" id="ups-shutdown-delay"
                                   value="{{ config.ups.shutdown_delay_s }}" min="10">
                            <div class="setting-desc">Grace period before system poweroff</div>
                        </div>
                    </div>
                    <button class="btn btn-primary mt-3" onclick="saveUPSSettings()">
                        <i class="bi bi-check-lg me-1"></i>Save UPS Settings
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- REMOTE ACCESS -->
        <div class="settings-section" id="section-remote">
            <div class="card bg-dark border-secondary mb-3">
                <div class="card-header"><i class="bi bi-globe me-2"></i>Remote Access via WireGuard Tunnel</div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        Access Vigilar from outside your home network via a WireGuard VPN tunnel to your Digital Ocean droplet.
                        A lower-quality HLS stream is generated specifically for remote viewing to conserve your upload bandwidth.
                    </p>
                    {% if config %}
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="remote-enabled"
                               {{ 'checked' if config.remote.enabled }}>
                        <label class="form-check-label" for="remote-enabled">Enable Remote Access Streams</label>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Upload Bandwidth (Mbps)</label>
                            <input type="number" class="form-control form-control-sm" id="remote-bandwidth"
                                   value="{{ config.remote.upload_bandwidth_mbps }}" min="1" max="1000" step="0.5">
                            <div class="setting-desc">Your home internet upload speed</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Remote Stream Resolution</label>
                            <select class="form-select form-select-sm" id="remote-resolution">
                                <option value="[640,360]" {{ 'selected' if config.remote.remote_hls_resolution == [640,360] }}>640x360 (better quality)</option>
                                <option value="[426,240]" {{ 'selected' if config.remote.remote_hls_resolution == [426,240] }}>426x240 (recommended)</option>
                                <option value="[320,180]" {{ 'selected' if config.remote.remote_hls_resolution == [320,180] }}>320x180 (low bandwidth)</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Remote Stream FPS</label>
                            <input type="number" class="form-control form-control-sm" id="remote-fps"
                                   value="{{ config.remote.remote_hls_fps }}" min="1" max="30">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Bitrate (kbps)</label>
                            <input type="number" class="form-control form-control-sm" id="remote-bitrate"
                                   value="{{ config.remote.remote_hls_bitrate_kbps }}" min="100" max="5000" step="50">
                            <div class="setting-desc">Per-camera bitrate for remote stream</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Max Remote Viewers</label>
                            <input type="number" class="form-control form-control-sm" id="remote-max-viewers"
                                   value="{{ config.remote.max_remote_viewers }}" min="0" max="20">
                            <div class="setting-desc">0 = unlimited</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">WireGuard Tunnel IP</label>
                            <input type="text" class="form-control form-control-sm" id="remote-tunnel-ip"
                                   value="{{ config.remote.tunnel_ip }}">
                        </div>
                    </div>

                    <!-- Bandwidth estimate -->
                    <div class="alert alert-info mt-3 py-2 small" id="bandwidth-estimate">
                        <i class="bi bi-speedometer me-1"></i>
                        <strong>Estimated bandwidth per viewer:</strong>
                        <span id="bw-per-viewer">
                            {{ (config.remote.remote_hls_bitrate_kbps * cameras|length / 1000)|round(1) }} Mbps
                        </span>
                        ({{ cameras|length }} cameras x {{ config.remote.remote_hls_bitrate_kbps }} kbps)
                        &bull;
                        <strong>Max concurrent:</strong>
                        ~{{ (config.remote.upload_bandwidth_mbps * 1000 * 0.8 / (config.remote.remote_hls_bitrate_kbps * [cameras|length, 1]|max))|round(0)|int }} viewers
                        at 80% of {{ config.remote.upload_bandwidth_mbps }} Mbps upload
                    </div>

                    <button class="btn btn-primary mt-2" onclick="saveRemoteSettings()">
                        <i class="bi bi-check-lg me-1"></i>Save Remote Settings
                    </button>
                    {% endif %}
                </div>
            </div>

            <div class="card bg-dark border-secondary">
                <div class="card-header"><i class="bi bi-tools me-2"></i>Setup Instructions</div>
                <div class="card-body">
                    <ol class="mb-0">
                        <li class="mb-2">On both home server and DO droplet, run: <code>remote/wireguard/setup_wireguard.sh</code></li>
                        <li class="mb-2">Exchange public keys between home server and droplet</li>
                        <li class="mb-2">On the droplet, install nginx and copy <code>remote/nginx/vigilar.conf</code> to <code>/etc/nginx/sites-available/</code></li>
                        <li class="mb-2">Run <code>certbot --nginx -d vigilar.yourdomain.com</code> for TLS</li>
                        <li class="mb-2">Verify: <code>ping 10.99.0.2</code> from droplet should reach home server</li>
                        <li>Access your system at <code>https://vigilar.yourdomain.com</code></li>
                    </ol>
                </div>
            </div>
        </div>

        <!-- NETWORK -->
        <div class="settings-section" id="section-network">
            <div class="card bg-dark border-secondary mb-3">
                <div class="card-header"><i class="bi bi-wifi me-2"></i>Web Server</div>
                <div class="card-body">
                    {% if config %}
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Bind Address</label>
                            <input type="text" class="form-control form-control-sm" id="web-host"
                                   value="{{ config.web.host }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Port</label>
                            <input type="number" class="form-control form-control-sm" id="web-port"
                                   value="{{ config.web.port }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Session Timeout (sec)</label>
                            <input type="number" class="form-control form-control-sm" id="web-session"
                                   value="{{ config.web.session_timeout }}" min="300">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Username</label>
                            <input type="text" class="form-control form-control-sm" id="web-username"
                                   value="{{ config.web.username }}">
                        </div>
                    </div>
                    <div class="alert alert-warning mt-3 py-2 small">
                        <i class="bi bi-exclamation-triangle me-1"></i>
                        Port and bind address changes require a restart to take effect.
                    </div>
                    <button class="btn btn-primary" onclick="saveWebSettings()">
                        <i class="bi bi-check-lg me-1"></i>Save Web Settings
                    </button>
                    {% endif %}
                </div>
            </div>

            <div class="card bg-dark border-secondary">
                <div class="card-header"><i class="bi bi-diagram-3 me-2"></i>MQTT Broker</div>
                <div class="card-body">
                    {% if config %}
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">MQTT Host</label>
                            <input type="text" class="form-control form-control-sm" id="mqtt-host"
                                   value="{{ config.mqtt.host }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">MQTT Port</label>
                            <input type="number" class="form-control form-control-sm" id="mqtt-port"
                                   value="{{ config.mqtt.port }}">
                        </div>
                    </div>
                    <div class="alert alert-warning mt-3 py-2 small">
                        <i class="bi bi-exclamation-triangle me-1"></i>
                        MQTT changes require a full system restart.
                    </div>
                    <button class="btn btn-primary mt-1" onclick="saveMQTTSettings()">
                        <i class="bi bi-check-lg me-1"></i>Save MQTT Settings
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- SYSTEM -->
        <div class="settings-section" id="section-system">
            <div class="card bg-dark border-secondary mb-3">
                <div class="card-header"><i class="bi bi-cpu me-2"></i>System</div>
                <div class="card-body">
                    {% if config %}
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">System Name</label>
                            <input type="text" class="form-control form-control-sm" id="sys-name"
                                   value="{{ config.system.name }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Timezone</label>
                            <input type="text" class="form-control form-control-sm" id="sys-timezone"
                                   value="{{ config.system.timezone }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Log Level</label>
                            <select class="form-select form-select-sm" id="sys-log-level">
                                {% for level in ['DEBUG', 'INFO', 'WARNING', 'ERROR'] %}
                                <option value="{{ level }}" {{ 'selected' if config.system.log_level == level }}>{{ level }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <button class="btn btn-primary mt-3" onclick="saveSystemSettings()">
                        <i class="bi bi-check-lg me-1"></i>Save System Settings
                    </button>
                    {% endif %}
                </div>
            </div>

            <div class="card bg-dark border-secondary">
                <div class="card-header"><i class="bi bi-info-circle me-2"></i>System Info</div>
                <div class="card-body">
                    <table class="table table-dark table-sm mb-0">
                        <tr><td class="text-muted" style="width:200px">Version</td><td>0.1.0</td></tr>
                        <tr><td class="text-muted">Cameras</td><td>{{ cameras|length }}</td></tr>
                        {% if config %}
                        <tr><td class="text-muted">Sensors</td><td>{{ config.sensors|length }}</td></tr>
                        <tr><td class="text-muted">Rules</td><td>{{ config.rules|length }}</td></tr>
                        <tr><td class="text-muted">Data Dir</td><td><code>{{ config.system.data_dir }}</code></td></tr>
                        <tr><td class="text-muted">Recordings Dir</td><td><code>{{ config.system.recordings_dir }}</code></td></tr>
                        <tr><td class="text-muted">HLS Dir</td><td><code>{{ config.system.hls_dir }}</code></td></tr>
                        <tr><td class="text-muted">Encryption</td><td>{{ 'Enabled' if config.storage.encrypt_recordings else 'Disabled' }}</td></tr>
                        <tr><td class="text-muted">UPS</td><td>{{ 'Enabled' if config.ups.enabled else 'Disabled' }}</td></tr>
                        {% endif %}
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/settings.js') }}"></script>
{% endblock %}