<%
local api = self.api
-%>
<style>
 #cbi-<%=api.appname%>-socks .td.cbi-value-field > div { 
	white-space: nowrap;
}
@media (max-width: 1152px) {
	 #cbi-<%=api.appname%>-socks .td.cbi-value-field > div {
		white-space: normal;
	}
}
</style>
<script type="text/javascript">
	//<![CDATA[
	var shunt_list = JSON.parse('<%=self.shunt_list%>');

	function go() {
		var _status = document.getElementsByClassName('_status');
		for (var i = 0; i < _status.length; i++) {
			var id = _status[i].getAttribute("socks_id");
			XHR.get('<%=api.url("socks_status")%>', {
					index: i,
					id: id
				},
				function(x, result) {
					var index = result.index;
					var div = '';
					var div1 = '<font style="font-weight:bold;" color="green">✓</font>&nbsp';
					var div2 = '<font style="font-weight:bold;" color="red">X</font>&nbsp';
					
					if (result.socks_status) {
						div += div1;
					} else {
						div += div2;
					}
					if (result.use_http) {
						if (result.http_status) {
							div += div1;
						} else {
							div += div2;
						}
					}
					_status[index].innerHTML = div;
				}
			);
		}
		

		var global_id = null;
		var global = document.getElementById("cbi-<%=api.appname%>-global");
		if (global) {
			var node = global.getElementsByClassName("cbi-section-node")[0];
			var node_id = node.getAttribute("id");
			global_id = node_id;
			var all_node = node.querySelectorAll("[id]");
			var reg1 = /^cbid\..*node\.main$/;

			for (var i = 0; i < all_node.length; i++) {
				var el = all_node[i];
				if (!reg1.test(el.id)) continue;

				var node_select = el;
				if (!node_select) continue;
				var cbid = el.id.replace(/\.main$/, "");
				var hidden_select = document.getElementById(cbid);
				var node_select_value = hidden_select ? hidden_select.options[0].value : "";
				if (!node_select_value || node_select_value.indexOf("_default") === 0 || node_select_value.indexOf("_direct") === 0 || node_select_value.indexOf("_blackhole") === 0) {
					continue;
				}

				var to_url = '<%=api.url("node_config")%>/' + node_select_value;
				if (node_select_value.indexOf("Socks_") === 0) {
					to_url = '<%=api.url("socks_config")%>/' + node_select_value.substring("Socks_".length);
				}
				var html = '<a href="#" onclick="location.href=\'' + to_url + '\'"><%:Edit%></a>';

				var m = cbid.match(/\.node$/);
				if (m) {
					html += '<a href="#" onclick="window.open(\'' + '<%=api.url("get_redir_log")%>?id=default&name=' + 'global' + '\', \'_blank\')"><%:Log%></a>';
				}

				node_select.insertAdjacentHTML("beforeend",
					'<div class="node-actions" style="display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; margin-left:4px;">'  
					+ html + '</div>'
				);
			}
		}

		var socks = document.getElementById("cbi-<%=api.appname%>-socks");
		if (socks) {
			var socks_enabled_dom = document.getElementById(global_id + "-socks_enabled");
			socks_enabled_dom.parentNode.removeChild(socks_enabled_dom);
			var descr = socks.getElementsByClassName("cbi-section-descr")[0];
			descr.outerHTML = socks_enabled_dom.outerHTML;
			rows = socks.getElementsByClassName("cbi-section-table-row");
			for (var i = 0; i < rows.length; i++) {
				try {
					var row = rows[i];
					var id = row.id;
					if (!id) continue;
					var dom_id = id + "-node";
					var cbid = dom_id.replace("cbi-", "cbid-").replace(new RegExp("-", 'g'), ".");
					dom_id = cbid + ".main";
					var node_select = document.getElementById(dom_id);
					if (!node_select) continue;

					var hidden_select = document.getElementById(cbid);;
					var node_select_value = hidden_select ? hidden_select.options[0].value : "";
					if (node_select_value && node_select_value != "") {
						var to_url = '<%=api.url("node_config")%>/' + node_select_value;
						var html = '<a href="#" onclick="location.href=\'' + to_url + '\'"><%:Edit%></a>';
						html += '<a href="#" onclick="window.open(\'' + '<%=api.url("get_socks_log")%>?name=' + id.replace("cbi-passwall2-", "") + '\', \'_blank\')"><%:Log%></a>';

						node_select.insertAdjacentHTML("afterend",
							'<div class="node-actions" style="display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; margin-left:4px;">'  
							+ html + '</div>'
						);
					}
				} catch(err) {
				}
			}
		}
	}
	document.addEventListener("DOMContentLoaded", function () {
		const hiddenSelect = document.getElementById("cbid.passwall2.<%=self.global_cfgid%>.node");
		let o_val = hiddenSelect.value
		const o_hasItem = shunt_list.find(element => element.id == o_val);
		hiddenSelect.addEventListener("change", function(el){
			let new_val = el.target.value
			const new_hasItem = shunt_list.find(element => element.id == new_val);
			if (new_hasItem) {
				XHR.get('<%=api.url("update_node")%>', {
					id: "<%=self.global_cfgid%>",
					data: JSON.stringify({
						node: new_val
					})
				},
				function(x, data) {
					if (x && x.status == 200 && data.code == 1) {
						window.location.reload();
					}
					else {
						alert("<%:Error%>");
					}
				});
			} else {
				try { document.getElementById("tab.passwall2.<%=self.global_cfgid%>.Shunt").style.display = "none"; } catch (error) {}
				try { document.querySelector('li[data-tab*="Shunt"]').style.display = "none"; } catch (error) {}
			}
		});
		let shunt_taboption = document.getElementById("container.passwall2.<%=self.global_cfgid%>.Shunt");
		if (shunt_taboption) {
			let shunt_option_list = document.getElementById("cbi-passwall2-shunt_option_list");
			if (shunt_option_list) {
				shunt_taboption.appendChild(shunt_option_list);
			}
		}
		go();
	});
	//setTimeout("go()", 1000);
	//]]>
</script>