<%
local api = require "luci.passwall.api"
local fs = require "nixio.fs"
local uci = require 'luci.model.uci'.cursor()
local mode = 'normal'
if fs.access('/etc/config/argon') then
	mode = uci:get_first('argon', 'global', 'mode')
end
-%>

<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;-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:-apple-system,BlinkMacSystemFont,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;
		border-radius: 12.375px;
		background-image: linear-gradient(270deg, #dde2ff 0%, #fffeff 100%);
	}

	@media (prefers-color-scheme: dark) {
		.block h4 {
			background-image: none;
			background-color: #2c323c;
		}
		.block.pure-g {
			background: #444950;
			box-shadow: unset;
		}
	}
	<% if mode == 'dark' then %>
		.block h4 {
			background-image: none;
			background-color: #2c323c;
		}
		.block.pure-g {
			background: #444950;
			box-shadow: unset;
		}
	<% end -%>

	.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) {
		.img-con {
			margin: 1.5rem 0.5rem;
		}
		.block img {
			width: 36px;
		}
	}

</style>

<fieldset id="_passwall_status_fieldset" class="cbi-section">
	<legend>
		<%:Running Status%>
	</legend>
	<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_tcp_node">TCP<br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<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/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6I0ZCQjE0MDt9DQoJLnN0MXtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIi8+DQo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNODYuOCw0Ny42QzgzLjYsMzMsNzQuOCwyMi41LDY2LjUsMjNoLTAuM2MtMy4zLDAtNi41LDEuMi04LjksMy4zYy0xLjgsMi00LjQsMy4yLTcuMSwzLjINCgljLTIuNiwwLTUuMS0xLjEtNi45LTNjLTIuNS0yLjMtNS44LTMuNS05LjEtMy41aC0wLjRjLTguMi0wLjUtMTcuMSwxMC0yMC4zLDI0LjZjLTMuNSwxNS41LDAuOCwyOS44LDkuNSwzMS45DQoJYzYuMywxLjYsMTMuMy0zLjksMTcuOS0xM2gxOC43YzQuNyw5LjEsMTEuNiwxNC42LDE3LjksMTNDODYsNzcuNCw5MC4yLDYzLjEsODYuOCw0Ny42TDg2LjgsNDcuNnogTTQyLjksNDguNUgzNnY3LjJoLTUuNnYtNy4yDQoJaC02Ljl2LTUuOGg2Ljl2LTcuMkgzNnY3LjJoNi45TDQyLjksNDguNXogTTYyLjcsNDkuMmMtMiwwLjEtMy43LTEuNC0zLjgtMy40Yy0wLjEtMiwxLjQtMy43LDMuNC0zLjhjMi0wLjEsMy43LDEuNCwzLjgsMy40DQoJYzAsMC4xLDAsMC4xLDAsMC4yQzY2LjIsNDcuNSw2NC43LDQ5LjEsNjIuNyw0OS4yQzYyLjcsNDkuMiw2Mi43LDQ5LjIsNjIuNyw0OS4yeiBNNzMuNyw0OS4yYy0yLDAuMS0zLjctMS40LTMuOC0zLjQNCgljLTAuMS0yLDEuNC0zLjcsMy40LTMuOGMyLTAuMSwzLjcsMS40LDMuOCwzLjRjMCwwLjEsMCwwLjEsMCwwLjJjMC4xLDEuOS0xLjQsMy41LTMuMywzLjZINzMuN3oiLz4NCjwvc3ZnPg0K" />
					</div>
				</div>
				<div class="pure-u-2-3">
					<h4 id="status_udp_node">UDP<br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<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, 27140 characters]" />
					</div>
				</div>
				<div class="pure-u-2-3">
					<h4 id="status_dns">DNS<br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<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, 9652 characters]" />
					</div>
				</div>
				<div class="pure-u-2-3">
					<h4 id="status_haproxy"><%:Load Balancing%><br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<div class="pure-u-1-4 check" onclick="check_connect('baidu', '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', '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', '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, 11584 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 class="pure-u-1-4 check" onclick="check_connect('instagram', 'www.instagram.com')">
			<div class="block pure-g">
				<div class="pure-u-1-3">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 117684 characters]" />	
					        </div>
				</div>
				<div class="pure-u-2-3">
					<h4 id="status_instagram"><%:Instagram Connection%><br /><span id="_instagram_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) {
				var status_dns = document.getElementById('status_dns');
				var status_haproxy = document.getElementById('status_haproxy');
				if (data) {
					if (true) {
						var status_tcp_node = document.getElementById('status_tcp_node');
						if (status_tcp_node) {
							var text = 'TCP<br />';
							if (data["tcp_node_status"])
								text += '<span class="green"><%:RUNNING%></span>';
							else
								text += '<span class="red"><%:NOT RUNNING%></span>';
							status_tcp_node.innerHTML = text;
						}
					}

					if (true) {
						var status_udp_node = document.getElementById('status_udp_node');
						if (status_udp_node) {
							var text = 'UDP<br />';
							if (data["udp_node_status"])
								text += '<span class="green"><%:RUNNING%></span>';
							else
								text += '<span class="red"><%:NOT RUNNING%></span>';
							status_udp_node.innerHTML = text;
						}
					}

					if (data.dns_mode_status) {
						status_dns.innerHTML = 'DNS<br /><span class="green"><%:RUNNING%></span>';
					} else {
						status_dns.innerHTML = 'DNS<br /><span class="red"><%:NOT RUNNING%></span>';
					}
					if (status_haproxy) {
						if (data.haproxy_status) {
							status_haproxy.innerHTML = '<%:Load Balancing%><br /><span class="green"><%:RUNNING%></span>'
						} else {
							status_haproxy.innerHTML = '<%:Load Balancing%><br /><span class="red"><%:NOT RUNNING%></span>'
						}
					}
				}
			});

		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>
