{{define "title"}}
All Servers
{{end}}

{{define "top_css"}}
{{end}}

{{define "username"}}
{{ .username }}
{{end}}

{{define "page_title"}}
All Servers
{{end}}

{{define "page_content"}}
<section class="content">
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mt-2 mb-2 flex-wrap">
            <h5 class="mb-2">All Servers</h5>
            <div class="btn-group" role="group" aria-label="Server view toggle" id="server_view_mode_toggle">
                <button type="button" class="btn btn-outline-secondary btn-sm" id="btn_server_view_card">
                    <i class="fas fa-th-large"></i> Card view
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm" id="btn_server_view_list">
                    <i class="fas fa-list"></i> List view
                </button>
            </div>
        </div>
        <div class="row" id="servers-list">
        </div>
        <!-- /.row -->
        <div id="server-table-view" style="display:none;">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <button type="button" class="btn btn-outline-danger btn-sm" id="btn_delete_selected_servers" disabled>
                    Delete selected (0)
                </button>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-sm" id="server-table">
                    <thead>
                        <tr>
                            <th style="width: 2rem;"><input type="checkbox" id="chk_select_all_servers"></th>
                            <th>Name</th>
                            <th>Interface</th>
                            <th>Listen Port</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="server-table-body">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="modal_new_server">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add new server</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form name="frm_new_server" id="frm_new_server">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="_server_id" class="control-label">ID</label>
                        <input type="text" class="form-control" id="_server_id" name="_server_id"
                               placeholder="e.g. wg-home">
                    </div>
                    <div class="form-group">
                        <label for="_server_name" class="control-label">Name</label>
                        <input type="text" class="form-control" id="_server_name" name="_server_name"
                               placeholder="e.g. WGhome">
                    </div>
                    <div class="form-group">
                        <label for="_server_interface" class="control-label">Interface</label>
                        <input type="text" class="form-control" id="_server_interface" name="_server_interface"
                               placeholder="e.g. wg-home">
                    </div>
                    <div class="form-group">
                        <label for="_server_addresses" class="control-label">Addresses</label>
                        <input type="text" class="form-control" id="_server_addresses" name="_server_addresses"
                               placeholder="e.g. 10.20.22.0/24, fd00::/64">
                        <small class="form-text text-muted">Comma-separated list of address ranges.</small>
                    </div>
                    <div class="form-group">
                        <label for="_server_listen_port" class="control-label">Listen Port</label>
                        <input type="text" class="form-control" id="_server_listen_port" name="_server_listen_port"
                               placeholder="e.g. 51822">
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="modal_server_settings">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Server Settings</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form name="frm_server_settings" id="frm_server_settings">
                <div class="modal-body">
                    <input type="hidden" id="_settings_server_id" name="_settings_server_id">
                    <div class="form-group">
                        <label for="_settings_endpoint_address" class="control-label">Endpoint Address</label>
                        <input type="text" class="form-control" id="_settings_endpoint_address"
                               placeholder="e.g. vpn.example.com or vpn.example.com:51822">
                        <small class="form-text text-muted">Leave empty to fall back to the app-wide default endpoint.</small>
                    </div>
                    <div class="form-group">
                        <label for="_settings_config_file_path" class="control-label">Config File Path</label>
                        <input type="text" class="form-control" id="_settings_config_file_path"
                               placeholder="/etc/wireguard/wg-home.conf">
                    </div>
                    <div class="form-group">
                        <label for="_settings_firewall_mark" class="control-label">Firewall Mark</label>
                        <input type="text" class="form-control" id="_settings_firewall_mark" placeholder="0xca6c">
                    </div>
                    <div class="form-group">
                        <label for="_settings_table" class="control-label">Table</label>
                        <input type="text" class="form-control" id="_settings_table" placeholder="auto">
                    </div>
                    <div class="form-group">
                        <label for="_settings_lan_interface" class="control-label">LAN Interface</label>
                        <input type="text" class="form-control" id="_settings_lan_interface" placeholder="e.g. eth0, br-lan">
                        <small class="form-text text-muted">Optional. Used only for the Firewall Preview - lets peers forward to this interface.</small>
                    </div>
                    <div class="form-group">
                        <label for="_settings_dns_servers" class="control-label">DNS Servers (override)</label>
                        <input type="text" class="form-control" id="_settings_dns_servers"
                               placeholder="e.g. 1.1.1.1, 8.8.8.8">
                        <small class="form-text text-muted">Comma-separated. Leave empty to fall back to the app-wide default DNS servers.</small>
                    </div>
                    <div class="form-group">
                        <label for="_settings_mtu" class="control-label">MTU (override)</label>
                        <input type="text" class="form-control" id="_settings_mtu" placeholder="e.g. 1420">
                        <small class="form-text text-muted">Leave empty to fall back to the app-wide default MTU.</small>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="modal_server_interface">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Server Interface</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form name="frm_server_interface" id="frm_server_interface">
                <div class="modal-body">
                    <input type="hidden" id="_iface_server_id" name="_iface_server_id">
                    <div class="form-group">
                        <label for="_iface_addresses" class="control-label">Server Interface Addresses</label>
                        <input type="text" class="form-control" id="_iface_addresses"
                               placeholder="e.g. 10.20.22.1/24, fd00::1/64">
                        <small class="form-text text-muted">Comma-separated list of address ranges.</small>
                    </div>
                    <div class="form-group">
                        <label for="_iface_listen_port" class="control-label">Listen Port</label>
                        <input type="text" class="form-control" id="_iface_listen_port" name="_iface_listen_port"
                               placeholder="e.g. 51822">
                    </div>
                    <div class="form-group">
                        <label for="_iface_pre_up" class="control-label">Pre Up Script</label>
                        <input type="text" class="form-control" id="_iface_pre_up" placeholder="Pre Up Script">
                    </div>
                    <div class="form-group">
                        <label for="_iface_post_up" class="control-label">Post Up Script</label>
                        <input type="text" class="form-control" id="_iface_post_up" placeholder="Post Up Script">
                    </div>
                    <div class="form-group">
                        <label for="_iface_pre_down" class="control-label">Pre Down Script</label>
                        <input type="text" class="form-control" id="_iface_pre_down" placeholder="Pre Down Script">
                    </div>
                    <div class="form-group">
                        <label for="_iface_post_down" class="control-label">Post Down Script</label>
                        <input type="text" class="form-control" id="_iface_post_down" placeholder="Post Down Script">
                    </div>
                    <hr>
                    <div class="form-group">
                        <label class="control-label">Public Key</label>
                        <input type="text" class="form-control" id="_iface_public_key" disabled>
                    </div>
                    <button type="button" class="btn btn-outline-danger btn-sm" id="btn_regenerate_keypair">
                        Regenerate Keypair
                    </button>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="modal_import_opnsense">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Import from OPNsense</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="text-muted">Upload an OPNsense <code>config.xml</code>. This only stages the data below for
                    you to review and edit - nothing is written until you click "Confirm Import", and the resulting
                    servers are never started automatically (use the normal per-server "Apply" flow for that).</p>
                <div class="form-inline mb-2">
                    <input type="file" id="_opnsense_file" accept=".xml">
                    <button type="button" class="btn btn-primary btn-sm ml-2" id="btn_opnsense_preview">Preview</button>
                </div>
                <div id="_opnsense_preview_area"></div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="btn_opnsense_confirm" style="display:none;">Confirm Import</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="modal_firewall">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Firewall Rules (nftables) - <span id="_fw_server_label"></span></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="_fw_server_id">

                <table class="table table-sm" id="_fw_rules_table">
                    <thead>
                        <tr>
                            <th>On</th><th>Chain</th><th>Proto</th><th>Port</th><th>Source</th><th>Action</th><th>Comment</th><th></th>
                        </tr>
                    </thead>
                    <tbody id="_fw_rules_tbody"></tbody>
                </table>

                <form id="frm_firewall_rule" class="form-inline">
                    <select class="form-control form-control-sm mr-1 mb-1" id="_fw_direction">
                        <option value="input">input</option>
                        <option value="forward">forward</option>
                    </select>
                    <select class="form-control form-control-sm mr-1 mb-1" id="_fw_protocol">
                        <option value="">any</option>
                        <option value="tcp">tcp</option>
                        <option value="udp">udp</option>
                    </select>
                    <input type="text" class="form-control form-control-sm mr-1 mb-1" id="_fw_port" placeholder="port(s) e.g. 8080" style="width:9em">
                    <input type="text" class="form-control form-control-sm mr-1 mb-1" id="_fw_source" placeholder="source CIDR (optional)" style="width:11em">
                    <select class="form-control form-control-sm mr-1 mb-1" id="_fw_action">
                        <option value="accept">accept</option>
                        <option value="drop">drop</option>
                        <option value="reject">reject</option>
                    </select>
                    <input type="text" class="form-control form-control-sm mr-1 mb-1" id="_fw_comment" placeholder="comment" style="width:11em">
                    <button type="submit" class="btn btn-primary btn-sm mb-1">Add rule</button>
                </form>

                <hr>
                <p class="text-muted mb-1">Ruleset preview:</p>
                <pre id="_firewall_preview_text" style="max-height: 30vh; overflow:auto;"></pre>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="btn_apply_firewall">Apply now (live)</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{{end}}

{{define "bottom_js"}}
<script>
    // cache of the last-fetched server list, keyed by id, so the Interface
    // modal can prefill fields without a second round trip
    var serversById = {};
    var lastServerData = [];
    var isAdminUser = {{.baseData.Admin}};
    var serverViewModeStorageKey = 'wg_server_view_mode';

    // badgeClass/badgeLabel drive the pill content; setServerStatusBadge
    // updates the badge in place (both card view and list view share the
    // same "status-badge-<id>" marker, so one poll updates both).
    function badgeClassFor(state) {
        if (state === 'up') { return 'badge-success'; }
        if (state === 'down') { return 'badge-danger'; }
        return 'badge-secondary';
    }

    function badgeLabelFor(state) {
        if (state === 'up') { return 'UP'; }
        if (state === 'down') { return 'DOWN'; }
        return 'UNKNOWN';
    }

    function statusBadgeHtml(state) {
        return '<span class="badge ' + badgeClassFor(state) + ' status-badge">' + badgeLabelFor(state) + '</span>';
    }

    // refreshServerStatus polls GET /servers/:id/service-status and updates
    // every status badge for that server id.
    function refreshServerStatus(serverId) {
        $.ajax({
            cache: false,
            method: 'GET',
            url: '{{.basePath}}/servers/' + serverId + '/service-status',
            dataType: 'json',
            contentType: "application/json",
            success: function (data) {
                setServerStatusBadge(serverId, data && data.active ? 'up' : 'down');
            },
            error: function () {
                setServerStatusBadge(serverId, 'unknown');
            }
        });
    }

    function setServerStatusBadge(serverId, state) {
        $('.status-badge-' + serverId).removeClass('badge-success badge-danger badge-secondary')
            .addClass(badgeClassFor(state)).text(badgeLabelFor(state));
    }

    // runServerAction disables the clicked button, shows a spinner, calls the
    // given POST action endpoint, then reflects the returned/refreshed status.
    function runServerAction(button, serverId, action) {
        const originalHtml = button.html();
        button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
        $.ajax({
            cache: false,
            method: 'POST',
            url: '{{.basePath}}/servers/' + serverId + '/service/' + action,
            dataType: 'json',
            contentType: "application/json",
            success: function (data) {
                if (data && typeof data.active !== 'undefined') {
                    setServerStatusBadge(serverId, data.active ? 'up' : 'down');
                }
                toastr.success('Server ' + action + ' successful');
                setTimeout(function () { refreshServerStatus(serverId); }, 1000);
            },
            error: function (jqXHR) {
                let message = 'Failed to ' + action + ' server';
                try {
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    if (responseJson && responseJson.message) { message = responseJson.message; }
                } catch (e) {
                    // ignore parse failure, use default message
                }
                toastr.error(message);
                setTimeout(function () { refreshServerStatus(serverId); }, 1000);
            },
            complete: function () {
                button.prop('disabled', false).html(originalHtml);
            }
        });
    }

    // serviceButtonsHtml renders Start/Stop/Restart buttons, admin-only.
    function serviceButtonsHtml(serverId) {
        if (!isAdminUser) {
            return '';
        }
        return `<div class="btn-group btn-service-actions" data-serverid="${serverId}">
                    <button type="button" class="btn btn-outline-success btn-sm btn-server-start" data-serverid="${serverId}" data-action="start">Start</button>
                    <button type="button" class="btn btn-outline-warning btn-sm btn-server-stop" data-serverid="${serverId}" data-action="stop">Stop</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm btn-server-restart" data-serverid="${serverId}" data-action="restart">Restart</button>
                </div>`;
    }

    function renderServersList(data) {
        $.each(data, function (index, obj) {
            serversById[obj.id] = obj;
            const addresses = (obj.Interface && obj.Interface.addresses) ? obj.Interface.addresses.join(", ") : "";
            const listenPort = obj.Interface ? obj.Interface.listen_port : "";
            const interfaceName = obj.Interface ? obj.Interface.name : "";

            // obj.id/interfaceName are server-side validated against [a-zA-Z0-9_-],
            // safe to interpolate; obj.name is free text and must be escaped.
            const safeName = $('<div>').text(obj.name).html();

            let html = `<div class="col-sm-6 col-md-6 col-lg-4" id="server_${obj.id}">
                            <div class="info-box">
                                <div class="info-box-content">
                                    <div class="btn-group">
                                        <a href="{{.basePath}}/servers/${obj.id}/clients" class="btn btn-outline-primary btn-sm">Manage clients</a>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal"
                                            data-target="#modal_server_settings" data-serverid="${obj.id}">Settings</button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal"
                                            data-target="#modal_server_interface" data-serverid="${obj.id}">Interface</button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline-info btn-sm btn-firewall-preview" data-serverid="${obj.id}" data-servername="${safeName}">Firewall</button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline-danger btn-sm btn-delete-server" data-serverid="${obj.id}" data-servername="${safeName}">Delete</button>
                                    </div>
                                    <div class="mt-2">
                                        ${serviceButtonsHtml(obj.id)}
                                    </div>
                                    <hr>
                                    <span class="info-box-text"><i class="fas fa-server"></i> ${safeName}</span>
                                    <span class="info-box-text"><i class="fas fa-fingerprint"></i> ID: ${obj.id}</span>
                                    <span class="info-box-text"><i class="fas fa-ethernet"></i> Interface: ${interfaceName}</span>
                                    <span class="info-box-text"><i class="fas fa-plug"></i> Listen Port: ${listenPort}</span>
                                    <span class="info-box-text"><i class="fas fa-map-marker-alt"></i> Addresses: ${addresses}</span>
                                    <span class="info-box-text"><i class="fas fa-heartbeat"></i> Status: <span class="badge badge-secondary status-badge status-badge-${obj.id}">UNKNOWN</span></span>
                                </div>
                            </div>
                        </div>`

            $('#servers-list').append(html);
            refreshServerStatus(obj.id);
        });
    }

    // renderServerTable builds the list/table view rows from the same
    // server data used by renderServersList.
    function renderServerTable(data) {
        const tbody = $("#server-table-body");
        tbody.empty();
        $.each(data, function (index, obj) {
            const interfaceName = obj.Interface ? obj.Interface.name : "";
            const listenPort = obj.Interface ? obj.Interface.listen_port : "";
            const safeName = $('<div>').text(obj.name).html();

            const row = $('<tr>').attr('id', 'server_row_' + obj.id);
            row.append($('<td>').append(
                $('<input type="checkbox" class="server-row-checkbox">').attr('data-serverid', obj.id)
            ));
            row.append($('<td>').html('<a href="{{.basePath}}/servers/' + obj.id + '/clients">' + safeName + '</a>'));
            row.append($('<td>').text(interfaceName));
            row.append($('<td>').text(listenPort));
            row.append($('<td>').append(
                $('<span class="badge badge-secondary status-badge"></span>').addClass('status-badge-' + obj.id).text('UNKNOWN')
            ));
            row.append($('<td>').append(
                $('<a class="btn btn-outline-primary btn-sm">Manage</a>').attr('href', '{{.basePath}}/servers/' + obj.id + '/clients')
            ));
            tbody.append(row);
            refreshServerStatus(obj.id);
        });
        if (!isAdminUser) {
            $("#chk_select_all_servers").closest('th').hide();
            $(".server-row-checkbox").closest('td').hide();
            $("#btn_delete_selected_servers").hide();
        }
        updateDeleteSelectedServersButton();
    }

    function updateDeleteSelectedServersButton() {
        const count = $(".server-row-checkbox:checked").length;
        const btn = $("#btn_delete_selected_servers");
        btn.text('Delete selected (' + count + ')');
        btn.prop('disabled', count === 0);
    }

    function applyServerViewMode(mode) {
        if (mode === 'list') {
            $("#servers-list").hide();
            $("#server-table-view").show();
            $("#btn_server_view_list").addClass('active');
            $("#btn_server_view_card").removeClass('active');
        } else {
            mode = 'card';
            $("#server-table-view").hide();
            $("#servers-list").show();
            $("#btn_server_view_card").addClass('active');
            $("#btn_server_view_list").removeClass('active');
        }
        try {
            localStorage.setItem(serverViewModeStorageKey, mode);
        } catch (e) {
            // localStorage unavailable, ignore
        }
    }

    function populateServersList() {
        $.ajax({
            cache: false,
            method: 'GET',
            url: '{{.basePath}}/servers',
            dataType: 'json',
            contentType: "application/json",
            success: function (data) {
                lastServerData = data || [];
                renderServersList(data);
                renderServerTable(lastServerData);
            },
            error: function (jqXHR, exception) {
                const responseJson = jQuery.parseJSON(jqXHR.responseText);
                toastr.error(responseJson['message']);
            }
        });
    }

    // load server list
    $(document).ready(function () {
        populateServersList();
        let newServerHtml = '<div class="col-sm-3 offset-md-3" style=" text-align: right;">' +
            '<button style="" id="btn_new_server" type="button" class="btn btn-outline-primary btn-sm" ' +
            'data-toggle="modal" data-target="#modal_new_server">' +
            '<i class="nav-icon fas fa-plus"></i> New Server</button> ' +
            '<button id="btn_import_opnsense" type="button" class="btn btn-outline-secondary btn-sm" ' +
            'data-toggle="modal" data-target="#modal_import_opnsense">' +
            '<i class="nav-icon fas fa-file-import"></i> Import from OPNsense</button></div>';
        $('h1').parents(".row").append(newServerHtml);
    })

    // view mode toggle: restore last-used mode, wire up buttons
    $(document).ready(function () {
        let savedMode = 'card';
        try {
            savedMode = localStorage.getItem(serverViewModeStorageKey) || 'card';
        } catch (e) {
            // ignore
        }
        applyServerViewMode(savedMode);

        $("#btn_server_view_card").click(function () {
            applyServerViewMode('card');
        });
        $("#btn_server_view_list").click(function () {
            applyServerViewMode('list');
        });

        $("#chk_select_all_servers").change(function () {
            const checked = $(this).is(':checked');
            $(".server-row-checkbox").prop('checked', checked);
            updateDeleteSelectedServersButton();
        });

        $("#server-table-body").on('change', '.server-row-checkbox', function () {
            if (!$(this).is(':checked')) {
                $("#chk_select_all_servers").prop('checked', false);
            }
            updateDeleteSelectedServersButton();
        });

        // deleteServerRequest reuses the exact request shape of the existing
        // single-server delete button (POST /servers/{id}/delete).
        function deleteServerRequest(serverId) {
            return $.ajax({
                cache: false,
                method: 'POST',
                url: '{{.basePath}}/servers/' + serverId + '/delete',
                dataType: 'json',
                contentType: "application/json"
            });
        }

        $("#btn_delete_selected_servers").click(function () {
            if (!isAdminUser) { return; }
            const ids = $(".server-row-checkbox:checked").map(function () {
                return $(this).data('serverid');
            }).get();

            if (ids.length === 0) {
                return;
            }

            if (!confirm("Delete " + ids.length + " server(s)? This only works if no clients are assigned to them anymore.")) {
                return;
            }

            const requests = ids.map(function (id) {
                return deleteServerRequest(id).catch(function (jqXHR) {
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                });
            });

            Promise.all(requests).then(function () {
                toastr.success('Removed selected servers');
                $('#servers-list').empty();
                populateServersList();
            });
        });

        // service action buttons: event delegation since cards/rows are rendered dynamically
        $(document).on('click', '.btn-server-start, .btn-server-stop, .btn-server-restart', function () {
            const button = $(this);
            const serverId = button.data('serverid');
            const action = button.data('action');
            runServerAction(button, serverId, action);
        });
    })

    // New server modal event: reset the form each time it is opened
    $(document).ready(function () {
        $("#modal_new_server").on('show.bs.modal', function (event) {
            let modal = $(this);
            modal.find("#_server_id").val("");
            modal.find("#_server_name").val("");
            modal.find("#_server_interface").val("");
            modal.find("#_server_addresses").val("");
            modal.find("#_server_listen_port").val("");
        });
    });

    function submitNewServer() {
        const id = $("#_server_id").val();
        const name = $("#_server_name").val();
        const iface = $("#_server_interface").val();
        const addresses = $("#_server_addresses").val().split(",").map(function (a) {
            return a.trim();
        }).filter(function (a) {
            return a !== "";
        });
        const listen_port = parseInt($("#_server_listen_port").val(), 10);

        const data = {
            "id": id,
            "name": name,
            "interface": iface,
            "addresses": addresses,
            "listen_port": listen_port
        };

        $.ajax({
            cache: false,
            method: 'POST',
            url: '{{.basePath}}/servers',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function (data) {
                $("#modal_new_server").modal('hide');
                toastr.success("Created server successfully");
                location.reload();
            },
            error: function (jqXHR, exception) {
                const responseJson = jQuery.parseJSON(jqXHR.responseText);
                toastr.error(responseJson['message']);
            }
        });
    }

    // Server settings modal event: load current settings for the clicked server
    $("#modal_server_settings").on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        const serverId = button.data('serverid');
        const modal = $(this);
        modal.find("#_settings_server_id").val(serverId);
        modal.find("#_settings_endpoint_address").val("");
        modal.find("#_settings_config_file_path").val("");
        modal.find("#_settings_firewall_mark").val("");
        modal.find("#_settings_table").val("");
        modal.find("#_settings_lan_interface").val("");
        modal.find("#_settings_dns_servers").val("");
        modal.find("#_settings_mtu").val("");

        $.ajax({
            cache: false,
            method: 'GET',
            url: '{{.basePath}}/servers/' + serverId + '/settings',
            dataType: 'json',
            contentType: "application/json",
            success: function (settings) {
                modal.find("#_settings_endpoint_address").val(settings.endpoint_address);
                modal.find("#_settings_config_file_path").val(settings.config_file_path);
                modal.find("#_settings_firewall_mark").val(settings.firewall_mark);
                modal.find("#_settings_table").val(settings.table);
                modal.find("#_settings_lan_interface").val(settings.lan_interface);
                modal.find("#_settings_dns_servers").val((settings.dns_servers || []).join(", "));
                modal.find("#_settings_mtu").val(settings.mtu || "");
            },
            error: function (jqXHR, exception) {
                const responseJson = jQuery.parseJSON(jqXHR.responseText);
                toastr.error(responseJson['message']);
            }
        });
    });

    function submitServerSettings() {
        const serverId = $("#_settings_server_id").val();
        const dnsServers = $("#_settings_dns_servers").val().split(",").map(function (a) {
            return a.trim();
        }).filter(function (a) {
            return a !== "";
        });
        const data = {
            "endpoint_address": $("#_settings_endpoint_address").val(),
            "config_file_path": $("#_settings_config_file_path").val(),
            "firewall_mark": $("#_settings_firewall_mark").val(),
            "table": $("#_settings_table").val(),
            "lan_interface": $("#_settings_lan_interface").val(),
            "dns_servers": dnsServers,
            "mtu": parseInt($("#_settings_mtu").val(), 10) || 0
        };

        $.ajax({
            cache: false,
            method: 'POST',
            url: '{{.basePath}}/servers/' + serverId + '/settings',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function (data) {
                $("#modal_server_settings").modal('hide');
                toastr.success("Updated server settings successfully");
            },
            error: function (jqXHR, exception) {
                const responseJson = jQuery.parseJSON(jqXHR.responseText);
                toastr.error(responseJson['message']);
            }
        });
    }

    $(document).ready(function () {
        $("#frm_server_settings").on('submit', function (e) {
            e.preventDefault();
            submitServerSettings();
        });
    });

    // Server interface modal event: prefill from the cached server list data
    $("#modal_server_interface").on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        const serverId = button.data('serverid');
        const modal = $(this);
        const obj = serversById[serverId] || {};

        modal.find("#_iface_server_id").val(serverId);
        modal.find("#_iface_addresses").val((obj.Interface && obj.Interface.addresses) ? obj.Interface.addresses.join(", ") : "");
        modal.find("#_iface_listen_port").val(obj.Interface ? obj.Interface.listen_port : "");
        modal.find("#_iface_pre_up").val(obj.Interface ? obj.Interface.pre_up : "");
        modal.find("#_iface_post_up").val(obj.Interface ? obj.Interface.post_up : "");
        modal.find("#_iface_pre_down").val(obj.Interface ? obj.Interface.pre_down : "");
        modal.find("#_iface_post_down").val(obj.Interface ? obj.Interface.post_down : "");
        modal.find("#_iface_public_key").val(obj.KeyPair ? obj.KeyPair.public_key : "");
    });

    function submitServerInterface() {
        const serverId = $("#_iface_server_id").val();
        const addresses = $("#_iface_addresses").val().split(",").map(function (a) {
            return a.trim();
        }).filter(function (a) {
            return a !== "";
        });
        const data = {
            "addresses": addresses,
            "listen_port": $("#_iface_listen_port").val(),
            "pre_up": $("#_iface_pre_up").val(),
            "post_up": $("#_iface_post_up").val(),
            "pre_down": $("#_iface_pre_down").val(),
            "post_down": $("#_iface_post_down").val()
        };

        $.ajax({
            cache: false,
            method: 'POST',
            url: '{{.basePath}}/servers/' + serverId + '/interface',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function (data) {
                $("#modal_server_interface").modal('hide');
                toastr.success("Updated server interface successfully");
                $('#servers-list').empty();
                populateServersList();
            },
            error: function (jqXHR, exception) {
                const responseJson = jQuery.parseJSON(jqXHR.responseText);
                toastr.error(responseJson['message']);
            }
        });
    }

    $(document).ready(function () {
        $("#frm_server_interface").validate({
            rules: {
                _iface_listen_port: {
                    required: true,
                    digits: true,
                    range: [1, 65535]
                }
            },
            messages: {
                _iface_listen_port: {
                    required: "Please enter a port",
                    digits: "Port must be an integer",
                    range: "Port must be in range 1..65535"
                }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            },
            submitHandler: function (form) {
                submitServerInterface();
            }
        });
    });

    // Regenerate keypair button: confirm, then POST and refresh the field
    $(document).ready(function () {
        $("#btn_regenerate_keypair").click(function () {
            const serverId = $("#_iface_server_id").val();
            if (!confirm("Are you sure you want to generate a new key pair for this server?\n" +
                "All existing peers will lose connectivity until their configuration is updated with the new public key.")) {
                return;
            }
            $.ajax({
                cache: false,
                method: 'POST',
                url: '{{.basePath}}/servers/' + serverId + '/keypair',
                dataType: 'json',
                contentType: "application/json",
                success: function (data) {
                    toastr.success("Generated new key pair successfully");
                    $("#_iface_public_key").val(data['public_key']);
                    $('#servers-list').empty();
                    populateServersList();
                },
                error: function (jqXHR, exception) {
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                }
            });
        });
    });

    // Firewall management modal
    function refreshFirewallPreview(serverId) {
        $("#_firewall_preview_text").text("Loading...");
        $.ajax({
            cache: false,
            method: 'GET',
            url: '{{.basePath}}/servers/' + serverId + '/firewall-preview',
            dataType: 'text',
            success: function (data) { $("#_firewall_preview_text").text(data); },
            error: function () { $("#_firewall_preview_text").text("Could not load firewall preview."); }
        });
    }

    function renderFirewallRules(serverId, rules) {
        const tbody = $("#_fw_rules_tbody");
        tbody.empty();
        $.each(rules, function (i, rule) {
            const safeComment = $('<div>').text(rule.comment || "").html();
            const row = `<tr data-ruleid="${rule.id}">
                <td>${rule.enabled ? "yes" : "no"}</td>
                <td>${rule.direction}</td>
                <td>${rule.protocol || "any"}</td>
                <td>${rule.port || "any"}</td>
                <td>${rule.source || "any"}</td>
                <td>${rule.action}</td>
                <td>${safeComment}</td>
                <td><button type="button" class="btn btn-outline-danger btn-sm btn-delete-fw-rule" data-serverid="${serverId}" data-ruleid="${rule.id}">Delete</button></td>
            </tr>`;
            tbody.append(row);
        });
    }

    function loadFirewallRules(serverId) {
        $.ajax({
            cache: false,
            method: 'GET',
            url: '{{.basePath}}/servers/' + serverId + '/firewall/rules',
            dataType: 'json',
            success: function (rules) { renderFirewallRules(serverId, rules); },
            error: function (jqXHR) {
                const responseJson = jQuery.parseJSON(jqXHR.responseText);
                toastr.error(responseJson['message']);
            }
        });
    }

    // Firewall button: rendered dynamically, use event delegation
    $(document).ready(function () {
        $('#servers-list').on('click', '.btn-firewall-preview', function () {
            const serverId = $(this).data('serverid');
            const serverName = $(this).data('servername');
            $("#_fw_server_id").val(serverId);
            $("#_fw_server_label").text(serverName + " (" + serverId + ")");
            $("#modal_firewall").modal('show');
            loadFirewallRules(serverId);
            refreshFirewallPreview(serverId);
        });

        $("#frm_firewall_rule").on('submit', function (e) {
            e.preventDefault();
            const serverId = $("#_fw_server_id").val();
            const data = {
                direction: $("#_fw_direction").val(),
                protocol: $("#_fw_protocol").val(),
                port: $("#_fw_port").val(),
                source: $("#_fw_source").val(),
                action: $("#_fw_action").val(),
                comment: $("#_fw_comment").val(),
                enabled: true
            };
            $.ajax({
                cache: false,
                method: 'POST',
                url: '{{.basePath}}/servers/' + serverId + '/firewall/rules',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function () {
                    toastr.success("Rule added");
                    $("#frm_firewall_rule")[0].reset();
                    loadFirewallRules(serverId);
                    refreshFirewallPreview(serverId);
                },
                error: function (jqXHR) {
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                }
            });
        });

        $("#_fw_rules_tbody").on('click', '.btn-delete-fw-rule', function () {
            const serverId = $(this).data('serverid');
            const ruleId = $(this).data('ruleid');
            if (!confirm("Delete this firewall rule?")) return;
            $.ajax({
                cache: false,
                method: 'POST',
                url: '{{.basePath}}/servers/' + serverId + '/firewall/rules/' + ruleId + '/delete',
                dataType: 'json',
                contentType: "application/json",
                success: function () {
                    toastr.success("Rule deleted");
                    loadFirewallRules(serverId);
                    refreshFirewallPreview(serverId);
                },
                error: function (jqXHR) {
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                }
            });
        });

        $("#btn_apply_firewall").click(function () {
            const serverId = $("#_fw_server_id").val();
            if (!confirm("Apply this ruleset to the live firewall now?\n" +
                "This runs 'nft -f' on the server, scoped to this server's own nftables table only.")) {
                return;
            }
            $.ajax({
                cache: false,
                method: 'POST',
                url: '{{.basePath}}/servers/' + serverId + '/firewall/apply',
                dataType: 'json',
                contentType: "application/json",
                success: function (data) {
                    toastr.success(data.message);
                    if (data.output) { $("#_firewall_preview_text").text(data.output); }
                },
                error: function (jqXHR) {
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message'] || "Failed to apply firewall rules");
                    if (responseJson['output']) { $("#_firewall_preview_text").text(responseJson['output']); }
                }
            });
        });
    });

    // Delete server button: rendered dynamically, use event delegation
    $(document).ready(function () {
        $('#servers-list').on('click', '.btn-delete-server', function () {
            const serverId = $(this).data('serverid');
            const serverName = $(this).data('servername');
            if (!confirm("Are you sure you want to delete server \"" + serverName + "\" (" + serverId + ")?\n" +
                "This only works if no clients are assigned to it anymore.")) {
                return;
            }
            $.ajax({
                cache: false,
                method: 'POST',
                url: '{{.basePath}}/servers/' + serverId + '/delete',
                dataType: 'json',
                contentType: "application/json",
                success: function (data) {
                    toastr.success("Server deleted successfully");
                    $('#servers-list').empty();
                    populateServersList();
                },
                error: function (jqXHR, exception) {
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                }
            });
        });
    });

    // OPNsense import: preview step (multipart upload, no store writes)
    var opnsensePreviewData = null;

    function csvList(arr) {
        return (arr || []).join(", ");
    }

    function renderOPNsensePreview(preview) {
        opnsensePreviewData = preview;
        const area = $("#_opnsense_preview_area");
        area.empty();

        if (!preview.servers || preview.servers.length === 0) {
            area.append('<p class="text-muted">No WireGuard servers found in this config.xml.</p>');
            $("#btn_opnsense_confirm").hide();
            return;
        }

        $.each(preview.servers, function (si, server) {
            let warnings = "";
            if (server.warnings && server.warnings.length) {
                warnings = '<div class="alert alert-warning py-1 px-2 mb-2">' + server.warnings.join("<br>") + '</div>';
            }
            let html = '<div class="card mb-3" data-serverindex="' + si + '">' +
                '<div class="card-header py-1"><strong>Server</strong></div>' +
                '<div class="card-body py-2">' + warnings +
                '<div class="form-row">' +
                '<div class="col-md-2"><label>ID</label><input type="text" class="form-control form-control-sm _f_id" value="' + (server.id || "") + '"></div>' +
                '<div class="col-md-2"><label>Name</label><input type="text" class="form-control form-control-sm _f_name" value="' + (server.name || "") + '"></div>' +
                '<div class="col-md-2"><label>Interface</label><input type="text" class="form-control form-control-sm _f_interface" value="' + (server.interface || "") + '"></div>' +
                '<div class="col-md-3"><label>Addresses</label><input type="text" class="form-control form-control-sm _f_addresses" value="' + csvList(server.addresses) + '"></div>' +
                '<div class="col-md-1"><label>Port</label><input type="text" class="form-control form-control-sm _f_port" value="' + (server.listen_port || "") + '"></div>' +
                '<div class="col-md-2"><label>MTU</label><input type="text" class="form-control form-control-sm _f_mtu" value="' + (server.mtu || "") + '"></div>' +
                '</div>' +
                '<div class="form-row mt-1">' +
                '<div class="col-md-4"><label>DNS servers</label><input type="text" class="form-control form-control-sm _f_dns" value="' + csvList(server.dns_servers) + '"></div>' +
                '<div class="col-md-4"><label>Endpoint address</label><input type="text" class="form-control form-control-sm _f_endpoint" value="' + (server.endpoint_address || "") + '"></div>' +
                '</div>' +
                '<table class="table table-sm mt-2 mb-0"><thead><tr><th>Client name</th><th>Allocated IP</th><th>Allowed IPs</th><th>Keepalive</th><th>Public key</th></tr></thead><tbody>';

            $.each(server.clients || [], function (ci, client) {
                let cwarn = "";
                if (client.warnings && client.warnings.length) {
                    cwarn = '<br><small class="text-warning">' + client.warnings.join("; ") + '</small>';
                }
                html += '<tr data-clientindex="' + ci + '">' +
                    '<td><input type="text" class="form-control form-control-sm _c_name" value="' + (client.name || "") + '">' + cwarn + '</td>' +
                    '<td><input type="text" class="form-control form-control-sm _c_allocated" value="' + csvList(client.allocated_ips) + '"></td>' +
                    '<td><input type="text" class="form-control form-control-sm _c_allowed" value="' + csvList(client.allowed_ips) + '"></td>' +
                    '<td><input type="text" class="form-control form-control-sm _c_keepalive" value="' + (client.persistent_keepalive || "") + '"></td>' +
                    '<td><small class="text-muted">' + (client.public_key || "(missing)") + '</small></td>' +
                    '</tr>';
            });

            html += '</tbody></table></div></div>';
            area.append(html);
        });

        $("#btn_opnsense_confirm").show();
    }

    $("#btn_opnsense_preview").click(function () {
        const fileInput = document.getElementById('_opnsense_file');
        if (!fileInput.files || fileInput.files.length === 0) {
            toastr.error("Please choose a config.xml file first");
            return;
        }
        const formData = new FormData();
        formData.append('config', fileInput.files[0]);

        $.ajax({
            cache: false,
            method: 'POST',
            url: '{{.basePath}}/servers/import/opnsense/preview',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (data) {
                renderOPNsensePreview(data);
            },
            error: function (jqXHR) {
                const responseJson = jQuery.parseJSON(jqXHR.responseText);
                toastr.error(responseJson['message'] || "Could not parse config.xml");
            }
        });
    });

    // Read the (possibly edited) preview form back into the same shape the
    // preview endpoint returned, so the commit endpoint gets full PreviewServer/
    // PreviewClient structures - not the original XML.
    function collectOPNsensePreviewEdits() {
        const servers = [];
        $("#_opnsense_preview_area > .card").each(function () {
            const card = $(this);
            const clients = [];
            card.find("tbody tr").each(function () {
                const row = $(this);
                clients.push({
                    name: row.find("._c_name").val(),
                    allocated_ips: row.find("._c_allocated").val().split(",").map(function (a) { return a.trim(); }).filter(function (a) { return a !== ""; }),
                    allowed_ips: row.find("._c_allowed").val().split(",").map(function (a) { return a.trim(); }).filter(function (a) { return a !== ""; }),
                    persistent_keepalive: parseInt(row.find("._c_keepalive").val(), 10) || 0,
                    enabled: true
                });
            });
            servers.push({
                id: card.find("._f_id").val(),
                name: card.find("._f_name").val(),
                interface: card.find("._f_interface").val(),
                addresses: card.find("._f_addresses").val().split(",").map(function (a) { return a.trim(); }).filter(function (a) { return a !== ""; }),
                listen_port: parseInt(card.find("._f_port").val(), 10) || 0,
                mtu: parseInt(card.find("._f_mtu").val(), 10) || 0,
                dns_servers: card.find("._f_dns").val().split(",").map(function (a) { return a.trim(); }).filter(function (a) { return a !== ""; }),
                endpoint_address: card.find("._f_endpoint").val(),
                enabled: true,
                clients: clients
            });
        });
        return servers;
    }

    // The public key is display-only (not editable) and matched back to
    // the original preview payload by position, since the input form
    // doesn't carry it. Merge it in from the last preview response before
    // sending the commit request.
    function mergeOriginalPreviewFields(edited) {
        if (!opnsensePreviewData || !opnsensePreviewData.servers) return edited;
        $.each(edited, function (si, server) {
            const orig = opnsensePreviewData.servers[si] || {};
            server.private_key = orig.private_key;
            server.public_key = orig.public_key;
            server.source_uuid = orig.source_uuid;
            $.each(server.clients, function (ci, client) {
                const origClient = (orig.clients || [])[ci] || {};
                client.public_key = origClient.public_key;
                client.preshared_key = origClient.preshared_key;
                client.additional_notes = origClient.additional_notes;
                client.source_uuid = origClient.source_uuid;
            });
        });
        return edited;
    }

    $("#btn_opnsense_confirm").click(function () {
        if (!opnsensePreviewData) return;
        const edited = mergeOriginalPreviewFields(collectOPNsensePreviewEdits());

        $.ajax({
            cache: false,
            method: 'POST',
            url: '{{.basePath}}/servers/import/opnsense/commit',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify({ servers: edited }),
            success: function (results) {
                let created = 0, failed = 0;
                $.each(results, function (i, r) {
                    if (r.imported) { created++; } else { failed++; }
                    if (r.error) { toastr.error(r.id + ": " + r.error); }
                    if (r.clients_skipped && r.clients_skipped.length) {
                        toastr.warning(r.id + " skipped clients: " + r.clients_skipped.join(", "));
                    }
                });
                toastr.success("Imported " + created + " server(s)" + (failed ? (", " + failed + " failed") : ""));
                $("#modal_import_opnsense").modal('hide');
                $('#servers-list').empty();
                populateServersList();
            },
            error: function (jqXHR) {
                const responseJson = jQuery.parseJSON(jqXHR.responseText);
                toastr.error(responseJson['message'] || "Import failed");
            }
        });
    });

    $("#modal_import_opnsense").on('show.bs.modal', function () {
        $("#_opnsense_file").val("");
        $("#_opnsense_preview_area").empty();
        $("#btn_opnsense_confirm").hide();
        opnsensePreviewData = null;
    });

    $(document).ready(function () {
        $.validator.setDefaults({
            submitHandler: function (form) {
                submitNewServer();
            }
        });
        $("#frm_new_server").validate({
            rules: {
                _server_id: {
                    required: true
                },
                _server_name: {
                    required: true
                },
                _server_interface: {
                    required: true
                },
                _server_listen_port: {
                    required: true,
                    digits: true,
                    range: [1, 65535]
                }
            },
            messages: {
                _server_id: {
                    required: "Please enter a server ID"
                },
                _server_name: {
                    required: "Please enter a server name"
                },
                _server_interface: {
                    required: "Please enter an interface name"
                },
                _server_listen_port: {
                    required: "Please enter a port",
                    digits: "Port must be an integer",
                    range: "Port must be in range 1..65535"
                }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
{{end}}