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

<style>
#add_link_div{
	display: none;
	width: auto;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	z-index: 99;
	text-align: center;
	background: white;
    box-shadow: darkgrey 10px 10px 30px 5px;
	padding: 30px 15px;
}
</style>

<script type="text/javascript">
	//<![CDATA[
	function ajax_add_node(link) {
		if (link) {
			XHR.get('<%=api.url("link_add_node")%>', {
				'link': link
			},
			function(x, data) {
				if(x && x.status == 200) {
					window.location.href = '<%=api.url("node_list")%>';
				}
				else {
					alert("<%:Error%>");
				}
			});
		}
	}
	
	function open_add_link_div() {
		document.getElementById("add_link_div").style.display = "block";
		document.getElementById("nodes_link").focus();
	}
	
	function close_add_link_div() {
		document.getElementById("add_link_div").style.display = "none";
	}
	
	function add_node() {
		var nodes_link = document.getElementById("nodes_link").value;
		if (nodes_link.trim() != "") {
			var s = nodes_link.split('://');
			if (s.length > 1) {
				ajax_add_node(nodes_link);
			}
			else {
				alert("<%:Please enter the correct link.%>");
			}
		}
		else {
			document.getElementById("nodes_link").focus();
		}
	}
	
	function clear_all_nodes() {
		if (confirm('<%:Are you sure to clear all nodes?%>') == true){
			XHR.get('<%=api.url("clear_all_nodes")%>', null,
			function(x, data) {
				if(x && x.status == 200) {
					window.location.href = '<%=api.url("node_list")%>';
				}
				else {
					alert("<%:Error%>");
				}
			});
		}
	}
	
	//]]>
</script>

<div id="add_link_div">
	<div class="cbi-value">
		<label class="cbi-value-title"><%:Share Link%></label>
		<div class="cbi-value-field">
			<p><textarea id="nodes_link" rows="5" cols="50"></textarea></p>
			<font color="red"><%:Not a subscription link!!!%></font>
		</div>
	</div>
	<div class="cbi-value">
		<div class="cbi-value-field" style="display: unset">
			<input class="btn cbi-button cbi-button-add" type="button" onclick="add_node()" value="<%:Add%>" />
			<input class="btn cbi-button cbi-button-remove" type="button" onclick="close_add_link_div()" value="<%:Close%>" />
		</div>
	</div>
</div>

<div class="cbi-value">
	<label class="cbi-value-title"></label>
	<div class="cbi-value-field">
		<input class="btn cbi-button cbi-button-add" type="submit" name="cbi.cts.<%=api.appname%>.nodes." value="<%:Add%>" />
		<input class="btn cbi-button cbi-button-add" type="button" onclick="open_add_link_div()" value="<%:Add the node via the link%>" />
		<input class="btn cbi-button cbi-button-remove" type="button" onclick="clear_all_nodes()" value="<%:Clear all nodes%>" />
		<input class="btn cbi-button cbi-button-remove" type="button" onclick="delete_select_nodes()" value="<%:Delete select nodes%>" />
		<input class="btn cbi-button" type="button" onclick="checked_all_node(this)" value="<%:Select all%>" />
		<input class="btn cbi-button cbi-button-apply" type="submit" name="cbi.apply" value="<%:Save & Apply%>" />
		<input class="btn cbi-button cbi-button-save" type="submit" name="cbi.save" value="<%:Save%>" />
		<input class="btn cbi-button cbi-button-reset" type="button" value="<%:Reset%>" onclick="location.href='<%=REQUEST_URI%>'" />
		<div id="div_node_count"></div>
	</div>
</div>