<style type="text/css">div.tab-con{font-size:14px;color:#4f5356;text-align:center;margin:40px 50px 10px}table.set-con{width:100%;border-collapse:collapse;table-layout:fixed}.set-con-long{width:20%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.set-con-short{width:15%}.boder-tr{border-bottom:1px solid #e7e7e7;height:40px;line-height:40px;background-color:#f4f4f4}.table-height{height:40px;line-height:40px;border-bottom:1px solid #e7e7e7}ul.ul-bottom{height:30px;border-bottom:1px solid #DDD}</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			upnp = {config = {}, upnp_list = {}}
		}

		local data = tpl_get_data(para, true)
	-%>

	var upnpInfo = <%=data%>;

	function init(result){
		var errNo = result[ERR_CODE];
		var ret;
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var upnp = ret.upnp.config;

		initSwitch("UpnpSwitch", upnp.enable, function(state,init){
			if (1 == state){
				$("#UpnpTab").show();
			}else{
				$("#UpnpTab").hide();
			}

			if (!init){
				var data = {};
				var para = {};
				para.upnp = {};
				para.upnp.config = data;
				data["enable"]=$("#UpnpSwitch").attr("data-value");
				showLoading(label.saving);
				apiSet(para, function(ret){
					var code = ret[ERR_CODE];
					handleError(code, showNote)?closeLoading():refreshUpnp();
				});
			}
		});

		var upnpList = ret.upnp.upnp_list.list;
		for (var i = 0; i < upnpList.length; i++){
			$("#UpnpTable").append(initUpnPEntry(upnpList[i]));
		}
	}

	init(upnpInfo);

	function refreshUpnp(){
		$.setTimeout(function(){
			stateman.go("pc.UPnPApp");
		}, 2000);
	}

	function initUpnPEntry(client){
		if ("1" == client.status){
			client.status = label.open;
		}else{
			client.status = label.close;
		}

		return  '<tr class="table-height">' +
					'<td class="set-con-long" title="' + client.descript + '">' + client.descript + '</td>' +
					'<td class="set-con-long">' + client.protocol + '</td>' +
					'<td class="set-con-long">' + client.external_port + '</td>' +
					'<td class="set-con-long">' + client.internal_port + '</td>' +
					'<td class="set-con-long">' + client.ip + '</td>' +
					'<td class="set-con-long">' + client.status + '</td>' +
				'</tr>';
	}
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/upnp.png?_=20191016014108" />
			<span class="help-title">{%label.UpnpSet%}</span>
		</li>
		<li class="summary">{%helpStr.upnp%}</li>
		<li class="summary">{%helpStr.upnpTip%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/upnp.png?_=20191016014108" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.UPnP%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul id="UpnpEnable" class="set-con">
		<li class="text-con">
			<label class="desc-lbl">{%label.UPnP%}</label>
			<span class="set-con-middle">
				<span id="UpnpSwitch" class="switch">
					<i class="switch-circle icon_select_off"></i>
				</span>
			</span>
		</li>
	</ul>
	<div id="UpnpTab" class="tab-con hidden">
		<table  id="UpnpTable" class="set-con">
			<tr class="boder-tr">
				<th class="set-con-long">{%label.UpnpSerDesc%}</th>
				<th class="set-con-short">{%label.protType%}</th>
				<th class="set-con-short">{%label.UpnpExPort%}</th>
				<th class="set-con-short">{%label.UpnpInPort%}</th>
				<th class="set-con-long">{%label.UpnpIpAddr%}</th>
				<th class="set-con-short">{%label.UpnpState%}</th>
			</tr>
		</table>
	</div>
	<div class="err-note hidden">
		<i class="err-icon icon_remind_line"></i>
		<p class="note-str"></p>
	</div>
</div>
