{{define "title"}}
Global Settings
{{end}}

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

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

{{define "page_title"}}
Global Settings
{{end}}

{{define "page_content"}}
<section class="content">
    <div class="container-fluid">
        <!-- <h5 class="mt-4 mb-2">Global Settings</h5> -->
        <div class="row">
            <!-- left column -->
            <div class="col-md-6">
                <div class="card card-success">
                    <div class="card-header">
                        <h3 class="card-title">WireGuard Global Settings</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form role="form" id="frm_global_settings" name="frm_global_settings">
                        <div class="card-body">
                            <div class="form-group">
                                <label for="endpoint_address">Endpoint Address</label>
                                <div class="input-group input-group">
                                    <input type="text" class="form-control" id="endpoint_address" name="endpoint_address" placeholder="Endpoint Address"
                                        value="{{ .globalSettings.EndpointAddress }}">
                                    <span class="input-group-append">
                                        <button type="button" class="btn btn-success btn-flat" data-toggle="modal"
                                            data-target="#modal_endpoint_address_suggestion"><i
                                                class="nav-icon fas fa-magic"></i> Suggest</button>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="dns_servers" class="control-label">DNS Servers</label>
                                <input type="text" data-role="tagsinput" class="form-control" id="dns_servers" value="">
                            </div>
                            <div class="form-group">
                                <label for="mtu">MTU</label>
                                <input type="text" class="form-control" id="mtu" name="mtu" placeholder="MTU"
                                    value="{{if .globalSettings.MTU}}{{ .globalSettings.MTU }}{{end}}">
                            </div>
                            <div class="form-group">
                                <label for="persistent_keepalive">Persistent Keepalive</label>
                                <input type="text" class="form-control" id="persistent_keepalive"
                                    name="persistent_keepalive" placeholder="Persistent Keepalive"
                                    value="{{if .globalSettings.PersistentKeepalive }}{{ .globalSettings.PersistentKeepalive }}{{end}}">
                            </div>
                            <div class="form-group">
                                <label for="firewall_mark">Firewall Mark</label>
                                <input type="text" class="form-control" id="firewall_mark"
                                    name="firewall_mark" placeholder="Firewall Mark"
                                    value="{{ .globalSettings.FirewallMark }}">
                            </div>
                            <div class="form-group">
                                <label for="Table">Table</label>
                                <input type="text" class="form-control" id="table"
                                    name="table" placeholder="auto"
                                    value="{{ .globalSettings.Table }}">
                            </div>
                            <div class="form-group">
                                <label for="config_file_path">WireGuard Config File Path</label>
                                <input type="text" class="form-control" id="config_file_path"
                                    name="config_file_path" placeholder="E.g. /etc/wireguard/wg0.conf"
                                    value="{{ .globalSettings.ConfigFilePath }}">
                            </div>
                            <div class="form-group">
                                <label for="config_file_mode">Config File Permissions</label>
                                <input type="text" class="form-control" id="config_file_mode"
                                    name="config_file_mode" placeholder="E.g. 0600"
                                    value="{{ if .globalSettings.ConfigFileMode }}{{ .globalSettings.ConfigFileMode }}{{ else }}0600{{ end }}">
                            </div>
                            <div class="form-group">
                                <label for="maxmind_license_key">MaxMind License Key</label>
                                <input type="text" class="form-control" id="maxmind_license_key"
                                    name="maxmind_license_key" placeholder="GeoLite2 license key"
                                    value="{{ .globalSettings.MaxmindLicenseKey }}">
                            </div>
                            <div class="form-group">
                                <label for="geolite_status">GeoLite2 Database</label>
                                <div class="input-group input-group">
                                    <input type="text" class="form-control" id="geolite_status" readonly
                                        value="{{ if .geoLiteAvailable }}Installed{{ if .geoLiteLastUpdated }} — updated {{ .geoLiteLastUpdated }}{{ end }}{{ else }}Not installed{{ end }}">
                                    <span class="input-group-append">
                                        <button type="button" class="btn btn-primary btn-flat" id="btn_update_geolite"
                                            onclick="updateGeoLite2()"><i class="nav-icon fas fa-download"></i>
                                            Install / Update</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->

                        <div class="card-footer">
                            <button type="submit" class="btn btn-success">Save</button>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
            </div>
            <div class="col-md-6">
                <div class="card card-success">
                    <div class="card-header">
                        <h3 class="card-title">Help</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <dl>
                            <dt>1. Endpoint Address</dt>
                            <dd>The public IP address of your WireGuard server that the client will connect to. Click on
                                <strong>Suggest</strong> button to auto detect the public IP address of your server.</dd>
                            <dt>2. DNS Servers</dt>
                            <dd>The DNS servers will be set to client config.</dd>
                            <dt>3. MTU</dt>
                            <dd>The MTU will be set to server and client config. By default it is <code>1450</code>. You might want
                                to adjust the MTU size if your connection (e.g PPPoE, 3G, satellite network, etc) has a low MTU.</dd>
                            <dd>Leave blank to omit this setting in the configs.</dd>
                            <dt>4. Persistent Keepalive</dt>
                            <dd>By default, WireGuard peers remain silent while they do not need to communicate,
                                so peers located behind a NAT and/or firewall may be unreachable from other peers
                                until they reach out to other peers themselves. Adding <code>PersistentKeepalive</code>
                                can ensure that the connection remains open.</dd>
                            <dd>Leave blank to omit this setting in the Client config.</dd>
                            <dt>5. Firewall Mark</dt>
                            <dd>Add a matching <code>fwmark</code> on all packets going out of a WireGuard non-default-route tunnel. Default value: <code>0xca6c</code></dd>
                            <dt>6. Table</dt>
                            <dd>Value for the <code>Table</code> setting in the wg conf file. Default value: <code>auto</code></dd>                            
                            <dt>7. WireGuard Config File Path</dt>
                            <dd>The path of your WireGuard server config file. Please make sure the parent directory
                                exists and is writable.</dd>
                            <dt>8. Config File Permissions</dt>
                            <dd>Octal file mode applied to the generated config file, which contains private keys.
                                Default value: <code>0600</code> (owner read/write only). Leave blank to use the default.</dd>
                            <dt>9. MaxMind License Key</dt>
                            <dd>Your MaxMind license key, used to download the GeoLite2-City database. Create a free
                                account at <code>maxmind.com</code> to generate one. Click
                                <strong>Install / Update</strong> to download it locally; it also auto-updates on startup
                                when older than 7 days. Once installed, a <strong>Location</strong> column
                                (flag, city, country) is shown next to each peer's endpoint on the Status page.</dd>
                        </dl>
                    </div>
                </div>
                <!-- /.card -->
            </div>
        </div>
        <!-- /.row -->
    </div>
</section>

<div class="modal fade" id="modal_endpoint_address_suggestion">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Endpoint Address Suggestion</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>Following is the list of public and local IP addresses for your consideration.</p>
                <select id="ip_suggestion" class="select2"
                    data-placeholder="Select an IP address" style="width: 100%;">
                </select>
            </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-success" id="btn_use_ip" disabled>Use selected IP address</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{{end}}

{{define "bottom_js"}}
    <script>
        function collectGlobalSettings() {
            return {
                "endpoint_address": $("#endpoint_address").val(),
                "dns_servers": $("#dns_servers").val().split(","),
                "mtu": $("#mtu").val(),
                "persistent_keepalive": $("#persistent_keepalive").val(),
                "firewall_mark": $("#firewall_mark").val(),
                "table": $("#table").val(),
                "config_file_path": $("#config_file_path").val(),
                "config_file_mode": $("#config_file_mode").val(),
                "maxmind_license_key": $("#maxmind_license_key").val()
            };
        }

        function submitGlobalSettings() {
            $.ajax({
                cache: false,
                method: 'POST',
                url: '{{.basePath}}/global-settings',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(collectGlobalSettings()),
                success: function(data) {
                    $("#modal_new_client").modal('hide');
                    toastr.success('Update global settings successfully');
                },
                error: function(jqXHR, exception) {
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                }
            });
        }

        // Save settings (to persist the license key), then download/update the
        // GeoLite2 database.
        function updateGeoLite2() {
            const btn = $("#btn_update_geolite");
            btn.prop("disabled", true);
            $.ajax({
                cache: false,
                method: 'POST',
                url: '{{.basePath}}/global-settings',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(collectGlobalSettings()),
                success: function() {
                    toastr.info('Downloading GeoLite2 database, please wait...');
                    $.ajax({
                        cache: false,
                        method: 'POST',
                        url: '{{.basePath}}/api/geolite/update',
                        dataType: 'json',
                        contentType: "application/json",
                        data: JSON.stringify({}),
                        success: function(res) {
                            toastr.success(res['message']);
                            setTimeout(function () { location.reload(); }, 1500);
                        },
                        error: function(jqXHR) {
                            btn.prop("disabled", false);
                            const responseJson = jQuery.parseJSON(jqXHR.responseText);
                            toastr.error(responseJson['message']);
                        }
                    });
                },
                error: function(jqXHR) {
                    btn.prop("disabled", false);
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                }
            });
        }

        function updateEndpointSuggestionIP() {
            $.getJSON("{{.basePath}}/api/machine-ips", null, function(data) {
                $("#ip_suggestion option").remove();
                $.each(data, function(index, item) {
                    $("#ip_suggestion").append(
                        $("<option></option>")
                            .text(item.ip_address + ' - ' + item.name)
                            .val(item.ip_address)
                    );
                });
                document.getElementById("btn_use_ip").disabled = false;
            });
        }
    </script>
    <script>
        // WireGuard Interface DNS server tag input
        $("#dns_servers").tagsInput({
            'width': '100%',
            'height': '75%',
            'interactive': true,
            'defaultText': 'Add More',
            'removeWithBackspace': true,
            'minChars': 0,
            'minInputWidth': '100%',
            'placeholderColor': '#666666'
        });

        // Load DNS server to the form
        {{range .globalSettings.DNSServers}}
        $("#dns_servers").removeTag('{{.}}');
        $("#dns_servers").addTag('{{.}}');
        {{end}}

        // Global setting form validation
        $(document).ready(function () {
            $.validator.setDefaults({
                submitHandler: function () {
                    submitGlobalSettings();
                }
            });
            $("#frm_global_settings").validate({
                rules: {
                    mtu: {
                        digits: true,
                        range: [68, 65535]
                    },
                    persistent_keepalive: {
                        digits: true
                    },
                    config_file_path: {
                        required: true
                    },
                    firewall_mark: {
                        required: false
                    },
                    table: {
                        required: false
                    }
                },
                messages: {
                    mtu: {
                        digits: "MTU must be an integer",
                        range: "MTU must be in range 68..65535"
                    },
                    persistent_keepalive: {
                        digits: "Persistent keepalive must be an integer"
                    },
                    config_file_path: {
                        required: "Please enter WireGuard config file path"
                    }
                },
                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');
                }
            });
        });

        // Endpoint IP suggestion modal event
        $(document).ready(function () {
            $("#modal_endpoint_address_suggestion").on('shown.bs.modal', function (e) {
                updateEndpointSuggestionIP();
            });
        });

        // Use selected IP address from suggestion form
        $(document).ready(function () {
            $("#btn_use_ip").click(function () {
                const ip = $("#ip_suggestion").select2('val');
                $("#endpoint_address").val(ip);
                $("#modal_endpoint_address_suggestion").modal('hide');
            });
        });
    </script>
{{end}}