<%
local api = require "luci.passwall2.api"
-%>

<style>
/*!
Pure v1.0.1
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;align-items: center;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}
	.block {
		margin: 0.5rem;
		padding: 0;
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		font-family: inherit;
		min-width: inherit;
		overflow-x: auto;
		overflow-y: hidden;
		border: 1px solid rgba(0,0,0,.05);
		border-radius: .375rem;
		box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
	}
	.img-con {
		margin: 1rem;

	}
	.green {
		font-size:.9rem;
		color: #2dce89;
	}
	.red {
		font-size:.9rem;
		color: #fb6340;
	}
	.yellow {
		font-size:.9rem;
		color: #fb9a05;
	}
	.block img {
		width: 48px;
		height: auto;
		/* float:right; */
	}
	.block h4 {
		font-size: .8125rem;
		font-weight: 600;
		margin: 1rem 0rem 1rem 1rem;
		color:#8898aa!important;
		line-height: 1.8em;
		min-height: 48px;
	}
	
	.check {
		cursor: pointer;
	}

	@media screen and (max-width: 720px) {
		.block {
			margin: 0.2rem;
		}
		.pure-u-1-4 {
			width: 50%;
		}
		.pure-u-1-2 {
			width: 100%;
		}
		.block h4 {
			margin: 1rem 0rem 1rem 0.5rem;
		}
	}
	
	@media screen and (max-width: 480px) {
		.block img {
			width: 36px;
		}
	}

</style>

<fieldset id="_passwall2_status_fieldset" class="cbi-section">
	<div class="pure-g status">
		<div class="pure-u-1-4">
			<div class="block pure-g">
				<div class="pure-u-1-3">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 12828 characters]" />
					</div>
				</div>
				<div class="pure-u-2-3">
					<h4 id="status_node">Core<br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<div class="pure-u-1-4 check" onclick="check_connect('baidu', 'https://www.baidu.com')">
			<div class="block pure-g">
				<div class="pure-u-1-3">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 12740 characters]" />
					</div>
				</div>
				<div class="pure-u-2-3">
					<h4 id="status_baidu"><%:Baidu Connection%><br /><span id="_baidu_status" class="red"><%:Touch Check%></span></h4>
				</div>
			</div>
		</div>
		<div class="pure-u-1-4 check" onclick="check_connect('google', 'https://www.google.com/generate_204')">
			<div class="block pure-g">
				<div class="pure-u-1-3">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 27520 characters]" alt=""/>
					</div>
				</div>
				<div class="pure-u-2-3">
					<h4 id="status_google"><%:Google Connection%><br /><span id="_google_status" class="red"><%:Touch Check%></span></h4>
				</div>
			</div>
		</div>
		<div class="pure-u-1-4 check" onclick="check_connect('github', 'https://github.com')">
			<div class="block pure-g">
				<div class="pure-u-1-3">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 73724 characters]" />
						</div>
				</div>
				<div class="pure-u-2-3">
					<h4 id="status_github"><%:GitHub Connection%><br /><span id="_github_status" class="red"><%:Touch Check%></span></h4>
				</div>
			</div>
		</div>
	  </div>
	<script>
		//<![CDATA[
		var imgs = document.getElementsByTagName('img');
		for (var i = 0 ; i < imgs.length; i++) {
			document.getElementsByTagName('img')[i].setAttribute("oncontextmenu","return false;");
			document.getElementsByTagName('img')[i].setAttribute("ondragstart","return false;");
		}
		XHR.poll(5, '<%=api.url("index_status")%>', null,
			function (x, data) {
				if (data) {
					if (true) {
						var status_node = document.getElementById('status_node');
						if (status_node) {
							var text = 'Core<br />';
							if (data["global_status"])
								text += '<span class="green"><%:RUNNING%></span>';
							else
								text += '<span class="red"><%:NOT RUNNING%></span>';
							status_node.innerHTML = text;
						}
					}
				}
			});
			
		function check_connect(type, url) {
			var s = document.getElementById('_' + type + '_status');
			if (s) {
				var div = s.parentNode.parentNode.parentNode.parentNode;
				div.removeAttribute('onclick');
				s.innerHTML = '<%:Check...%>';
				var sendDate = (new Date()).getTime();
				XHR.get('<%=api.url("connect_status")%>', {
						type: type,
						url : url
					},
					function(x, rv) {
						if (rv.ping_type && rv.ping_type == "curl") {
							var use_time = rv.use_time;
							if (use_time < 1000) {
								s.className="green";
							} else if (use_time < 2000) {
								s.className="yellow";
							} else {
								s.className="red";
							}
							s.innerHTML = use_time + " ms";
						} else if (rv.status) {
							s.className="green";
							s.innerHTML = "<%:Working...%>";
						}
						else {
							s.className="red";
							s.innerHTML = '<%:Problem detected!%>';
						}
						div.setAttribute('onclick','check_connect("' + type + '","' + url + '")');
					}
				);
			}
			return false;
		}
//]]>
	</script>
</fieldset>
