{{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="row" id="servers-list">
        </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>
                <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_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 -->
{{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 = {};

    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>
                                    <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>
                                </div>
                            </div>
                        </div>`

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

    function populateServersList() {
        $.ajax({
            cache: false,
            method: 'GET',
            url: '{{.basePath}}/servers',
            dataType: 'json',
            contentType: "application/json",
            success: function (data) {
                renderServersList(data);
            },
            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-2 offset-md-4" 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></div>';
        $('h1').parents(".row").append(newServerHtml);
    })

    // 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("");

        $.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);
            },
            error: function (jqXHR, exception) {
                const responseJson = jQuery.parseJSON(jqXHR.responseText);
                toastr.error(responseJson['message']);
            }
        });
    });

    function submitServerSettings() {
        const serverId = $("#_settings_server_id").val();
        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()
        };

        $.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_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(),
            "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']);
                }
            });
        });
    });

    $(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}}