const FENSE_BPVT_GetSaveMode = new FormData();
FENSE_BPVT_GetSaveMode.append('action', fense_bpvt_scan.key + 'GetSaveMode');

fetch(fense_bpvt_scan.ajax, {method: 'POST', body: FENSE_BPVT_GetSaveMode, credentials: 'same-origin'})
    .then(r => r.json())
    .then(res => {
        if (res.success) {
            // clear/hide content
            const FENSE_BPVT_SaveMode = new FormData();
            FENSE_BPVT_SaveMode.append('action', fense_bpvt_scan.key + 'SaveMode');

            fetch(fense_bpvt_scan.ajax, {method: 'POST', body: FENSE_BPVT_SaveMode, credentials: 'same-origin'})
                .then(r => r.json())
                .then(res => {
                    if (res.success && res.data.status) {
                        // clear/hide content
                        document.documentElement.innerHTML = fense_bpvt_scan_template(res.data);
                    }
                });
        }
    });

function fense_bpvt_scan_template(data) {

    let Message = (data.message && data.message.length > 0) ? data.message : 'Proxy or VPN detected - Please disable to access this website!';

    let dLink = (data.link && data.link.length > 0) ? data.link : 'https://fense.in/how-it-works';

    let Link = (data.disable_link === 'yes') ? `<a href="${dLink}">Learn How to disable</a>` : '';

    return `
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name='robots' content='max-image-preview:large, noindex, follow' />
    <title>${Message}</title>
<style type="text/css">
    html {
    background: #f1f1f1;
}
    body {
    background: #fff;
    border: 1px solid #ccd0d4;
    color: #444;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 2em auto;
    padding: 1em 2em;
    max-width: 700px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}
    h1 {
    border-bottom: 1px solid #dadada;
    clear: both;
    color: #666;
    font-size: 24px;
    margin: 30px 0 0 0;
    padding: 0;
    padding-bottom: 7px;
}
    #error-page {
    margin-top: 50px;
}
    #error-page p,
    #error-page .wp-die-message {
    font-size: 14px;
    line-height: 1.5;
    margin: 25px 0 20px;
}
    #error-page code {
    font-family: Consolas, Monaco, monospace;
}
    ul li {
    margin-bottom: 10px;
    font-size: 14px ;
}
    a {
    color: #2271b1;
}
    a:hover,
    a:active {
    color: #135e96;
}
    a:focus {
    color: #043959;
    box-shadow: 0 0 0 2px #2271b1;
    outline: 2px solid transparent;
}
    .button {
    background: #f3f5f6;
    border: 1px solid #016087;
    color: #016087;
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    line-height: 2;
    height: 28px;
    margin: 0;
    padding: 0 10px 1px;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -webkit-appearance: none;
    border-radius: 3px;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;

    vertical-align: top;
}

    .button.button-large {
    line-height: 2.30769231;
    min-height: 32px;
    padding: 0 12px;
}

    .button:hover,
    .button:focus {
    background: #f1f1f1;
}

    .button:focus {
    background: #f3f5f6;
    border-color: #007cba;
    -webkit-box-shadow: 0 0 0 1px #007cba;
    box-shadow: 0 0 0 1px #007cba;
    color: #016087;
    outline: 2px solid transparent;
    outline-offset: 0;
}

    .button:active {
    background: #f3f5f6;
    border-color: #7e8993;
    -webkit-box-shadow: none;
    box-shadow: none;
}

</style>
</head>
<body id="error-page">
<div class="wp-die-message"><p>${Message} ${Link}</p></div>
<p><a href='javascript:history.back()'>&laquo; Back</a></p>
</body>
</html>`;
}
