<%-
	local ntm = require "luci.model.network".init()
	local fwm = require "luci.model.firewall".init()
	local sys = require "luci.sys"
	local net
	local ifaces = { }
	local netlist = { }
	for _, net in ipairs(ntm:get_networks()) do
		if  net:name():match("openvpn") then
			local z = fwm:get_zone_by_network(net:name())
			ifaces[#ifaces+1] = net:name()
			netlist[#netlist+1] = {
				net:name(), z and z:name() or "-", z
			}
		end
	end

	table.sort(netlist,
		function(a, b)
			if a[2] ~= b[2] then
				return a[2] < b[2]
			else
				return a[1] < b[1]
			end
		end)
-%>

<script type="text/javascript" src="<%=resource%>/cbi.js?v=git-26.178.71745-e37f3c2"></script>
<script type="text/javascript">//<![CDATA[

	function iface_shutdown(id, reconnect) {
		if (!reconnect && !confirm(String.format('<%_Really shutdown interface "%s" ?\nYou might lose access to this device if you are connected via this interface.%>', id)))
			return;
		var d = document.getElementById(id + '-ifc-description');
		if (d)
			d.innerHTML = reconnect
				? '<em><%:Interface is reconnecting...%></em>'
				: '<em><%:Interface is shutting down...%></em>';
/*
		var s = document.getElementById('ifc-rc-status');
		if (s)
		{		
			s.parentNode.style.display = 'block';
			s.innerHTML = '<%:Waiting for changes to be applied...%>';
		}*/

		var command ;
		if(reconnect)
		{
			command = "reconnect"
			XHR.get('<%=luci.dispatcher.build_url("admin", "vpn", "openvpn", "reconnect ")%>' + id, null,
				function(x)
				{
					if (s)
					{
						s.innerHTML = reconnect
							? '<%:Interface reconnected%>'
							: '<%:Interface shut down%>';

						window.setTimeout(function() {
							s.parentNode.style.display = 'none';
						}, 1000);
					}
				}
			);
		}
		else
		{
			command = "reconnect"
			XHR.get('<%=luci.dispatcher.build_url("admin", "vpn", "openvpn", "shutdown ")%>' + id, null,
				function(x)
				{
					if (s)
					{
						s.innerHTML = reconnect
							? '<%:Interface reconnected%>'
							: '<%:Interface shut down%>';

						window.setTimeout(function() {
							s.parentNode.style.display = 'none';
						}, 1000);
					}
				}
			);			command = "shutdown"
		}

		// XHR.get('<%=luci.dispatcher.build_url("admin", "vpn", "openvpn")%>/command/' + id, null,
		// XHR.get('<%=luci.dispatcher.build_url("admin", "vpn", "openvpn")%>/command/' + id, null,
		// 	function(x)
		// 	{
		// 		if (s)
		// 		{
		// 			s.innerHTML = reconnect
		// 				? '<%:Interface reconnected%>'
		// 				: '<%:Interface shut down%>';

		// 			window.setTimeout(function() {
		// 				s.parentNode.style.display = 'none';
		// 			}, 1000);
		// 		}
		// 	}
		// );
	}
	
	
	XHR.poll(10, '<%=luci.dispatcher.build_url("admin", "vpn", "openvpn", "iface_status", table.concat(ifaces, ","))%>', null,
		function(x, ifcs){
			if (ifcs)
			{
				for (var idx = 0; idx < ifcs.length; idx++)
				{
					var ifc = ifcs [idx];
					var val = ifc.name;

					var html = '';
					var s = document.getElementById(ifc.id+'-ifc-devices');
					if (s)
					{
						var stat = String.format(
							'<img src="<%=resource%>/icons/tunnel%s.png" style="width:16px; height:16px; vertical-align:middle" />',
								ifc.is_up ? '' : '_disabled'
						);
						if (ifc.subdevices && ifc.subdevices.length)
						{
							stat += ' <strong>(';

							for (var j = 0; j < ifc.subdevices.length; j++)
							{	
								var sif = ifc.subdevices[j];
										
								stat += String.format(
									'<img src="<%=resource%>/icons/tunnel%s.png" style="width:16px; height:16px; vertical-align:middle" title="%h" />',
										sif.is_up ? '' : '_disabled',
										sif.name
								);
							}

							stat += ')</strong>';
						}

						stat += String.format(
							'<br /><small>%h</small>',
								ifc.name
						);

						s.innerHTML = stat;
					}			
		
			         var d = document.getElementById(ifc.id+'-ifc-description');
				     
			
					if (d && ifc.proto && ifc.ifname)
					{
						if (ifc.is_up)
						{
							html += String.format('<strong><%:Uptime%>:</strong> %t<br />', ifc.uptime);
						}

						html += String.format(
							'<strong><%:RX%></strong>: %.2mB (%d <%:Pkts.%>)<br />' +
							'<strong><%:TX%></strong>: %.2mB (%d <%:Pkts.%>)<br />',
								ifc.rx_bytes, ifc.rx_packets,
								ifc.tx_bytes, ifc.tx_packets
						);


						if (ifc.ipaddrs && ifc.uptime)
						{
							html += '<strong><%:IPv4%>: </strong>';

							for (var i = 0; i < ifc.ipaddrs.length; i++)
								html += String.format(
									'%s%s/%d',
									i ? ', ' : '',
									ifc.ipaddrs[i].addr,
									ifc.ipaddrs[i].prefix
								);

							html += '<br />';
						}

						if (ifc.ip6addrs && ifc.ip6addrs.length)
						{
							html += '<strong><%:IPv6%>: </strong>';

							for (var i = 0; i < ifc.ip6addrs.length; i++)
								html += String.format(
									'%s%s/%d',
									i ? ', ' : '',
									ifc.ip6addrs[i].addr.toUpperCase(),
									ifc.ip6addrs[i].prefix
								);

							html += '<br />';
						}

						d.innerHTML = html;
					}
					else if (d && !ifc.proto)
					{
						var e = document.getElementById(ifc.id + '-ifc-edit');
						if (e)
							e.disabled = true;

						d.innerHTML = String.format(
							'<em><%:Unsupported protocol type.%></em><br />' +
							'<a href="%h"><%:Install protocol extensions...%></a>',
								'<%=luci.dispatcher.build_url("admin/system/packages")%>?query=luci-proto&display=available'
						);
					}
					else if (d && !ifc.ifname)
					{
						d.innerHTML = String.format(
							'<em><%:Network without interfaces.%></em><br />' +
							'<a href="<%=luci.dispatcher.build_url("admin/network/network/%s")%>?tab.network.%s=physical"><%:Assign interfaces...%></a>',
								ifc.name, ifc.name
						);
					}
					else if (d)
					{
						d.innerHTML = '<em><%:Interface not present or not connected yet.%></em>';
					}
				}
			}
		}
	
	);	
	
//]]></script>


<div class="cbi-map">
	<fieldset class="cbi-section">

		<table class="cbi-section-table" style="margin:10px; empty-cells:hide">
			<tr class="cbi-section-table-titles">
				<th class="cbi-section-table-cell"><%:Profile Name%></th>
				<th class="cbi-section-table-cell" style="text-align:left"><%:Status%></th>
				<!-- <th class="cbi-section-table-cell"><%:Actions%></th> -->
			</tr>
			<%
				for i, net in ipairs(netlist) do
					local z = net[3]
					local c = "#C47441"
					local t = z and translate("Part of zone %q" % z:name()) or translate("No zone assigned")
					repeat
					cmp_if=net[1]         
					if cmp_if:match("openvpn") then
						sys.exec("echo %q >> /tmp/cmp_if" % cmp_if)
					else
						break
					end
			%>

			<tr class="cbi-section-table-row cbi-rowstyle-<%=i % 2 + 1%>">
				<td class="cbi-value-field" style="padding:3px">
					<div class="ifacebox">
						<div class="ifacebox-head" style="background-color:<%=c%>" title="<%:abc%>">
							<strong><%=net[1]%></strong>
						</div>
						<div class="ifacebox-body" id="<%=net[1]:upper()%>-ifc-devices">
							<img src="<%=resource%>/icons/tunnel.png" style="width:16px; height:16px" /><br />
							(<small><%=luci.sys.exec("uci get network.%q.ifname" % net[1]:lower())%></small>)
						</div>
					</div>
				</td>
				<td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=net[1]%>-ifc-description">
					<em><%:Collecting data...%></em>
				</td>
				<td style="width:420px">
<!-- 				<script>
					var a=1;
					document.write("<input type=button class='cbi-button cbi-button-reload' style=width:100px onclick=iface_shutdown('<%=net[1]%>',true) title='<%:Reconnect this interface%>' value=<%:Connect%> />");  
					document.write("<input type=button class='cbi-button cbi-button-reset' style=width:100px onclick=iface_shutdown('<%=net[1]%>',false)  title='<%:Shutdown this interface%>' value=<%:Stop%> />");    
					document.write("<input type=button class='cbi-button cbi-button-edit' style=width:100px onclick=location.href='<%=luci.dispatcher.build_url("admin/network/network", net[1])%>' title='<%:Edit this interface%>' value=<%:Edit%> />"); 
				</script>
 -->			</tr>
			<% until true %>
			<% end %>
		</table>
</fieldset>
