<style type="text/css">#Content{background-color:#f0f0f0}#Con{background-color:#f0f0f0}div.device-list{background-color:#FFF}ul.list{margin:0 .5rem}a.list-item{text-decoration:none}li.list-item{font-size:0;padding:.25rem 0 0;overflow:hidden;border-bottom:1px solid #e9e9e9}a.list-item:last-child li.list-item{border-bottom:0}div.left-con{float:left;width:20%}i.verdor-icon{font-size:1.25rem;display:inline-block;width:1.25rem;height:1.25rem}div.right-con{float:right;width:80%}a:last-child div.right-con{border-bottom:0}p.list-con-l{font-size:0;float:left}p.list-con-r{position:relative;color:#949494;font-size:.4rem;float:right;max-width:2rem;text-align:right;min-width:2rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p.list-con-r::before{content:"\A";white-space:pre}span.speed-limit{color:#1389e7;position:absolute;top:0;right:0}span.list-con1{color:#575757;font-size:.417rem}span.self{margin-left:.2rem;font-size:.4rem;color:#1389e7;vertical-align:top}span.list-con1::after{content:"\A";white-space:pre}span.list-con2{color:#949494;font-size:.4rem}span.speed-con{display:inline-block;width:2.5rem}span.speed-con i{margin-right:.1rem}.icon_speed_up{color:#1499e6}.icon_speed{color:#1fb66f}span.mac{margin-left:.2rem}</style>
<script type="text/javascript">
(function(){
	<%
		local json = require("luci.json")
		local para = {device_manage = {client_list = {}}}
		local result = tpl_get_data(para)
		local client_list = result[K_MODULE].device_manage.client_list
		local clients = json.encode(client_list)

		local remote_ip = luci.http.getenv("REMOTE_ADDR")
	-%>

	var clients = <%=clients%>;

	function JSON2UriParam(data){
		return $.param(data).replace(/\+/g, '%20');
	}

	function initOnlineEntry(client){
		var param = JSON2UriParam(client);
		var vendor;
		if(client.brand){
			vendor = "icon_" + getAlias(client.brand);
		}else{
			vendor = "icon_" + getVendor(client.mac);
		}
		var devName = htmlEscape(getStrInMax(client.name, 16));
		var uRate = netSpeedTrans(client.upload_speed);
		var dRate = netSpeedTrans(client.download_speed);
		var timeStr = timeTrans(client.online_time);
		var rightConStr = timeStr;

		return '<a href="#/parentCtrlAddRule/?keyBack=1&' + param + '" class="list-item"><li class="list-item">' +
			'<div class="left-con"><i class="verdor-icon ' + vendor + '"></i></div>' +
			'<div class="right-con">' +
				'<p class="list-con-l">' +
					'<span class="list-con1">' + devName + '</span>'+
					'<span class="list-con2 speed-con"><i class="icon_speed_up"></i><span>' + uRate + '</span></span>' +
					'<span class="list-con2 speed-con"><i class="icon_speed"></i><span>' + dRate + '</span></span>' +
				'</p>' +
				'<p class="list-con-r">' + rightConStr + '</p>' +
			'</div>' +
		'</li></a>';
	}

	function initForbidEntry(client){
		var param = JSON2UriParam(client);
		var vendor;
		if(client.brand){
			vendor = "icon_" + getAlias(client.brand);
		}else{
			vendor = "icon_" + getVendor(client.mac);
		}
		var devName = htmlEscape(getStrInMax(client.name, 16));

		return '<a href="#/parentCtrlAddRule/?keyBack=1&' + param + '" class="list-item"><li class="list-item">' +
			'<div class="left-con"><i class="verdor-icon ' + vendor + '"></i></div>' +
			'<div class="right-con">' +
				'<p class="list-con-l">' +
					'<span class="list-con1">' + devName + '</span>'+
					'<span class="list-con2">{%label.mac%}<span class="mac">' + client.mac + '</span></span>' +
				'</p>' +
			'</div>' +
		'</li></a>';
	}

	var onlineListObj = $("#onlineList");
	var offlineListObj = $("#offlineList");
	var forbidListObj = $("#forbidList");
	var forbidTitleObj = $("#ForbidTitle");
	var offlineTitle = $("#OfflineTitle");

	function initList(clients){
		onlineListObj.empty();
		offlineListObj.empty();
		forbidListObj.empty();
		forbidTitleObj.hide();
		offlineTitle.hide();

		var len = clients.length;
		for (var i = 0; i < len; i++){
			if (0 == clients[i].internet_enable) {
				forbidTitleObj.show();
				forbidListObj.append(initForbidEntry(clients[i]));
			}else{
				if (1== clients[i].online_status){
					onlineListObj.append(initOnlineEntry(clients[i]));
				}else{
					offlineTitle.show();
					offlineListObj.append(initForbidEntry(clients[i]));
				}
			}
		}
	}
	initList(clients);
})();
</script>
<div class="head-con">
	<a href="#/parentCtrl/?keyBack=1" class="head-btn-l"><i class="head-btn icon icon_back"></i></a>
	<h1 class="head-title">{%label.addDev%}</h1>
</div>
<div class="device-list below-head">
	<ul class="set-con-title" id="OnlineTitle">
		<label class="title-desc-lbl" id="WifiName">{%label.onlineClient%}</label>
	</ul>
	<ul id="onlineList" class="list"></ul>
	<ul class="set-con-title hidden" id="OfflineTitle">
		<label class="title-desc-lbl" id="WifiName">{%label.offlineClient%}</label>
	</ul>
	<ul id="offlineList" class="list"></ul>
	<ul class="set-con-title hidden" id="ForbidTitle">
		<label class="title-desc-lbl" id="WifiName">{%label.forbidClient%}</label>
	</ul>
	<ul id="forbidList" class="list"></ul>
</div>
