<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style>
        !vpn_styles.css!
        !vpn_customization_styles.css!
    </style> 
</head>
<body>
<table class="wrapper">
	<tr>
		<td colspan="3">
			<div class="main">
				<img src="#vpn.png#" class="vpn_logo" id="vpnLogo" />
				<p class="product-name" id="vpnProductName">$ProductName$</p>
				<div class="content">
				    <h1 id="vpnAdviseEnableVpnHeader">$AdviseEnableVpnHeader$</h1>
                    <h1 id="vpnVpnSiteCategory">$%VpnSiteCategory%$</h1>
					<p class="margin-top-g2" style="word-wrap:break-word; width:100%;" id="vpnTargetUrl">%TargetUrl%</p>
					<p class="virtual-server margin-top-g2" id="vpnVirtualServer">$VirtualServer$ %VpnRegion%</p>
					<div class="buttons margin-top-g6">
						<form class="button-wrapper button-wrapper_recommended" onclick="onEnableVpn(); return false;">
							<button class="button_recommended button_recommended-foreground_custom button_recommended-background_custom button_recommended-shadow_custom" id="vpnButtonEnableVpn"><span class="button__text">$EnableVpn$</span></button>
						</form>
						<form class="button-wrapper" onclick="onContinue(); return false;">
							<button class="button button-border_custom button-foreground_custom button-background_custom button-shadow_custom"><span class="button__text" id="vpnButtonContinue">$Continue$</span></button>
						</form>
					</div>
					<div class="checkbox margin-top-g4">
						<label for="rmb" id="vpnCheckbox">
							<input type="checkbox" id="rmb" %RememberChoiceInitState%>
							$RememberChoiceText$
						</label>
					</div>
					<div class="margin-top-g6">
                        <a href="%VpnSettingsUrl%" id="vpnButtonSettings" class="button_borderless link-foreground_custom" target="_parent" onclick="showSettings(); return false;">$VpnSettings$</a>
                    </div>
				</div>
			</div>
		</td>
	</tr>
	<tr height="70">
		<td width="33%">
			<img src="#kl_logo.png#" class="kl_logo" id="vpnKlLogo" />
		</td>
        <td width="33%" class="center"></td>
        <td width="33%">
        </td>
	</tr>
</table>
<script>
    function callAsyncCup(url) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.send();
    }

    function showSettings() {
        callAsyncCup("%VpnSettingsUrl%");
    }

    function isRememberChecked() {
        return document.getElementById('rmb').checked;
    }

    function onEnableVpn() {
        if (isRememberChecked()) {
            parent.document.location.href = "%EnableVpnAndSave%";
        }
        else {
            parent.document.location.href = "%EnableVpnUrl%";
        }
    }

    function onContinue() {
        if (isRememberChecked()) {
            parent.document.location.href = "%IgnoreAndContinueAndSave%";
        }
        else {
            parent.document.location.href = "%IgnoreAndContinue%";
        }
    }
     
</script>
</body>
</html>
