<%#
    Rosy is a theme for LuCI. It is based on luci-theme-bootstrap
    luci-theme-rosy
        Copyright 2018 Rosy Song <rosysong@rosinson.com>
        Copyright 2018 Yan Lan Shen <yanlan.shen@rosinson.com>

    Have a bug? Please create an issue here on GitHub!
        https://github.com/rosywrt/luci-theme-rosy/issues

    luci-theme-bootstrap:
        Copyright 2008 Steven Barth <steven@midlink.org>
        Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
        Copyright 2012 David Menting <david@nut-bolt.nl>

    Licensed to the public under the Apache License 2.0

-%>

<%
	local sys  = require "luci.sys"
	local util = require "luci.util"
	local http = require "luci.http"
	local disp = require "luci.dispatcher"

	local boardinfo = util.ubus("system", "board")
	local node = disp.context.dispatched

	local pcall, dofile, _G = pcall, dofile, _G
	local disturl,supporturl,bugurl,homeurl
	if pcall(dofile, "/etc/openwrt_release") then
		if _G.DISTRIB_HOME_URL and _G.DISTRIB_HOME_URL:match("https?://.*") then
			homeurl = _G.DISTRIB_HOME_URL
		else
			homeurl = "http://www.Lantronix.com"
		end
		if _G.DISTRIB_SUPRT_URL and _G.DISTRIB_SUPRT_URL:match("https?://.*") then
			suprturl = _G.DISTRIB_SUPRT_URL
		else
			suprturl = "http://www.Lantronix.com"
		end
		if _G.DISTRIB_MANF_URL and _G.DISTRIB_MANF_URL:match("https?://.*") then
			manfurl = _G.DISTRIB_MANF_URL
		else
			manfurl = "http://www.Lantronix.com"
		end
		if _G.DISTRIB_BUG_URL and _G.DISTRIB_BUG_URL:match("https?://.*") then
			bugurl = _G.DISTRIB_BUG_URL
		else
			bugurl = "http://www.Lantronix.com"
		end
	end
-%>
<!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>">

<head>
	<meta charset="utf-8">
	<title>
		<%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> -
		LuCI</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<meta name="format-detection" content="telephone=no, email=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="x5-fullscreen" content="true">
	<meta name="full-screen" content="yes">
	<meta name="x5-page-mode" content="app">
	<meta name="browsermode" content="application">
	<meta name="theme-color" content="#0099CC">
	<meta name="msapplication-tap-highlight" content="no">
	<meta name="msapplication-TileColor" content="#0099CC">

	<meta name="application-name" content="<%=striptags( (boardinfo.hostname or " ?") ) %> - LuCI">
	<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or " ?") ) %> - LuCI">
	<meta name="msapplication-TileImage" content="<%=media%>/logo.png" />
	<link rel="icon" href="<%=media%>/logo.png" sizes="144x144">
	<link rel="apple-touch-icon-precomposed" href="<%=media%>/logo.png" sizes="144x144">

	<link rel="stylesheet" href="<%=media%>/cascade.css?v=git-26.177.63976-93b5b44">
	<link rel="shortcut icon" href="<%=media%>/favicon.ico">
	<% if node and node.css then %>
	<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
	<% end -%>
	<% if css then %>
	<style title="text/css">
		<%=css %>
	</style>
	<% end -%>
	<script src="<%=resource%>/cbi.js?v=git-26.177.63976-93b5b44"></script>
	<script src="<%=media%>/js/ScrollY.js?v=git-26.177.63976-93b5b44"></script>
	<script type="text/javascript">//<![CDATA[
		(function() {
			function get_children(node) {
				var children = [];

				for (var k in node.children) {
					if (!node.children.hasOwnProperty(k))
						continue;

					if (!node.children[k].satisfied)
						continue;

					if (!node.children[k].hasOwnProperty('title'))
						continue;

					children.push(Object.assign(node.children[k], { name: k }));
				}

				return children.sort(function(a, b) {
					return ((a.order || 1000) - (b.order || 1000));
				});
			}
			function render_submenu(tree,url,active,level){
				var l = (level || 0) + 1,
				    ul = E('ul', { 'class' : 'slide-menu' }),
			            children = get_children(tree),
				    activeNode = null;
				
				if (children.length == 0 || l > 2) 
                                        return E([]);
				for (var i = 0; i < children.length; i++) {
					var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[2] :( L.env.dispatchpath ?  children[i].name == L.env.dispatchpath[2] : i ==0));
					var submenu = render_submenu(children[i], url + '/' + children[i].name, isActive,l ) ,
                                            hasChildren = submenu.children.length;

 		                                  ul.appendChild(E('li', {  }, [                                              
	                                                 E('a', {                                                                                                         
                                                        	 'href': hasChildren ? '#' : L.url(url, children[i].name),                                 
                                                	         'class': hasChildren ? 'menu' : null,                                         
                                        	                 'data-title': hasChildren ? null : _(children[i].title),                      
                                	                         }, [ _(children[i].title) ]),                                                 
                        	                         submenu                                                                                                                           
                	                                                                                                                       
        	                		]));			
						if (isActive && active)
							activeNode = children[i];
				}
                                if (activeNode)                                                                                          
	                                ul.style.display = 'block';  
				return ul;

			}
			function render_mainmenu(tree, url, level) {
				var l = (level || 0) + 1,
				    ul = E('ul', { 'class' : "nav scroll" }),
				    children = get_children(tree);
				if (children.length == 0 || l > 2)
					return E([]);
				
				for (var i = 0; i < children.length; i++) {
					var isActive = (L.env.requestpath.length > 2 ?  (children[i].name == L.env.requestpath[1] ) : L.env.dispatchpath[1] == children[i].name );
					var submenu = render_submenu(children[i], url + '/' + children[i].name,isActive, l),
					    hasChildren = submenu.children.length;

					if(children[i].name != "logout"){
					 ul.appendChild(E('li', { 'class' : 'slide'  }, [
					         E('a', {                                                                                                    
                                                        'href': hasChildren ? '#' : L.url(url, children[i].name),                                                                                                                                   
                                                        'class': hasChildren ? 'menu' : null,                                                 
                                                        'data-title': hasChildren ? null : _(children[i].title),                                  
                                                        }, [ _(children[i].title) ]) ,
						submenu 
					]));
					}
				}
				if (l == 1) {
					var container = document.querySelector('#navBox');

					container.appendChild(ul);
					container.style.display = '';
				}
				return ul;
			}

			function render_modemenu(tree) {
				var ul = document.querySelector('#modemenu'),
				    children = get_children(tree);
				
				for (var i = 0; i < children.length; i++) {
					var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);

				ul.appendChild(E('li', {}, [
						E('a', {
							'href': L.url(children[i].name),
							'class': isActive ? 'active' : null
						}, [ _(children[i].title) ])
					]));
					
					if (isActive)
						render_mainmenu(children[i], children[i].name);
				}

				 if (ul.children.length > 1 )
					ul.style.display = '';
			}

			function render_tabmenu(tree, url, level) {
				var container = document.querySelector('#tabmenu'),
				    l = (level || 0) + 1,
				    ul = E('ul', { 'class': 'tabs' }),
				    children = get_children(tree),
				    activeNode = null;
				if (children.length == 0)
					return E([]);

					for (var i = 0; i < children.length; i++) {
						var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
						    activeClass = isActive ? ' active' : '',
						    className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
	
						ul.appendChild(E('li', { 'class': className }, [
							E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
						]));
						if( i < children.length -1)
							ul.appendChild(E('span',{'class':'divider'},'|'));
					
						if (isActive)
							activeNode = children[i];
					}
		                if (ul.children.length == 0)                                                                           
		                        return E([]);  
				container.appendChild(ul);
				container.style.display = '';
				
				if (activeNode)
					container.appendChild(render_tabmenu(activeNode, url + '/' + activeNode.name, l));

				return ul;
			}

			function render_logout(tree){
				var ul = document.querySelector('#logg');
				var children = get_children(tree);
				var grandchildren;
				var url;
				if (children.length > 0){
				for (var i = 0; i < children.length; i++) {
					url = children[i].name;
					className = 'tabmenu-item-%s'.format(children[i].name);
					grandchildren = get_children(children[i]);
					for (var j = 0; j < grandchildren.length; j++) {
						className = 'tabmenu-item-%s'.format(grandchildren[j].name);
						baby = get_children(grandchildren[j]);
						if( baby.length <= 0) {
							ul.appendChild(
								E('a', {
									'href': L.url(url, grandchildren[j].name),
									'class':  null,
									'data-title': _(grandchildren[j].title),
									}, [ _(grandchildren[j].title) ])
								);
							}
						}
					}
				}
			}
			function auth_level(tree){
				var children = get_children(tree);
				if (children.length == 0)
					return login;
				for (var i = 0; i < children.length; i++) {
					var submenu = render_mainmenu(children[i], url + '/' + children[i].name, l),
					hasChildren = submenu.children.length;
					if (hasChildren){
						return "auth"
					}else{
						return "nouth"
					}
				}
			}

			document.addEventListener('luci-loaded', function(ev) {
				var tree = <%= luci.http.write_json(luci.dispatcher.context.authsession and luci.dispatcher.menu_json() or {}) %>,
		//		var tree=JSON.parse('{"action":{"recurse":true,"type":"firstchild"},"children":{"admin":{"satisfied":true,"title":"Administration","order":10,"action":{"type":"firstchild","recurse":true},"children":{"quicksetup":{"satisfied":true,"action":{"type":"firstchild"},"order":10,"children":{"quicksetup":{"satisfied":true,"action":{"path":"quicksetup/quicksetup","type":"template"},"title":"Quick Setup","name":"quicksetup"},"setup":{"wildcard":true,"satisfied":true,"action":{"path":"quicksetup","type":"view"}}},"title":"Quick Setup","name":"quicksetup"},"logout":{"order":999,"satisfied":true,"action":{"module":"luci.controller.admin.index","type":"call","function":"action_logout"},"title":"Logout","name":"logout"},"system":{"satisfied":true,"title":"System","order":20,"children":{"commands":{"satisfied":true,"action":{"type":"firstchild"},"order":80,"children":{"dashboard":{"order":1,"satisfied":true,"title":"Dashboard","action":{"path":"system/commands","type":"view"},"name":"dashboard"},"config":{"order":2,"satisfied":true,"title":"Configure","action":{"post":{"cbi.submit":true},"type":"cbi","path":"custom_commands"},"name":"config"}},"title":"Custom Commands","name":"commands"},"system":{"order":1,"satisfied":true,"action":{"type":"view","path":"system/system"},"title":"System","name":"system"},"admin":{"satisfied":true,"action":{"type":"firstchild"},"order":2,"children":{"password":{"order":1,"satisfied":true,"action":{"type":"view","path":"system/password"},"title":"Router Password","name":"password"},"sshkeys":{"satisfied":true,"action":{"type":"view","path":"system/sshkeys"},"order":3,"depends":{"fs":{"/usr/sbin/dropbear":"executable"}},"title":"SSH-Keys","name":"sshkeys"},"dropbear":{"satisfied":true,"action":{"type":"view","path":"system/dropbear"},"order":2,"depends":{"fs":{"/usr/sbin/dropbear":"executable"}},"title":"SSH Access","name":"dropbear"}},"title":"Administration","name":"admin"}},"action":{"preferred":"system","type":"firstchild","recurse":true},"name":"system"},"percepxion":{"satisfied":true,"action":{"type":"firstchild"},"order":80,"children":{"percepxionclient":{"order":1,"satisfied":true,"title":"Client","action":{"post":{"cbi.submit":true},"type":"cbi","path":"percepxion"},"name":"percepxionclient"}},"title":"Percepxion","name":"percepxion"}}}}}');
				    node = tree,
				    url = '';
				render_modemenu(node);

				if (L.env.dispatchpath.length >= 3) {
					for (var i = 0; i < 3 && node; i++) {
						node = node.children[L.env.dispatchpath[i]];
						url = url + (url ? '/' : '') + L.env.dispatchpath[i];
					}
					if (node)
						render_tabmenu(node, url);
				}
				 render_logout(tree);
				var script = document.createElement('script');
			       script.src='/luci-static/rosy/js/script.js';
		               document.body.appendChild(script);

		});
	})();
	//]]></script>
</head>
<body class="lang_<%=luci.i18n.context.lang%>  <% if not luci.dispatcher.context.authsession then %>login<%else%>logged-in<% end %>" data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>">
	<header>
		<div class="container">
			<span class="showSide"></span>
			<a class="brand PC-hide" href="#"><%=boardinfo.hostname or "?"%></a>
                <div class="btn-con  pull-right">
                    <strong><span><em><%=luci.dispatcher.context.authuser %></em></span></strong>
                    <a class="label success" target="_blank" rel="noopener noreferrer" href="<%=suprturl%>" or "#" ><%:Help ?%></a>
                    <div class="btn-con  pull-right">
                        <span id="indicators" class="btn-con pull-left">
                        </span> 
                        <span class="label logout" id="logg"></span>
                    </div>
            </div>
		</div>
	</header>
	<div style="" class="loading">
		<span>
			<div class="loading-img">
				<img src="<%=media%>/loading.svg">
			</div>Loading...
		</span>
	</div>
	<div class="main">
		<div class="main-left">
			<div class="nav-container">
				<div class="logoImg_t">
					<a href="<%=manfurl%>" or "#" >
						<img class="mobile-hide" src="<%=media%>/logo_t.png" alt="Rosy" style="width: 100%">
						<img src="<%=media%>/mobile-loginBG.png" class="PC-hide">
					</a>
					<a class="brand" href="<%=manfurl%>" or "#" ><%=boardinfo.hostname or "?"%></a>
				</div>
				<div class="navbar-container" id="navBox">
				</div>
			</div>

		</div>
		<div class="main-right">
			<div id="maincontent">
				<div class="logoImg">
					<img class="mobile-hide" src="<%=media%>/logo.png" alt="Rosy">
					<img src="<%=media%>/mobile-loginBG.png" class="PC-hide">
					<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
                		</div>
				<div class="container">
					<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
					<div class="alert-message warning">
						<h4><%:No password set!%></h4>
						<p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p>
						<% if disp.lookup("admin/system/admin") then %>
							<div><a class="btn" href="<%=url("admin/system/admin")%>"> <%:Go to password configuration...%></a></div>
						<% end %>
					</div>
					<%- end -%>

					<noscript>
						<div class="alert-message warning">
							<h4><%:JavaScript required!%></h4>
							<p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p>
						</div>
					</noscript>	

					<div id="tabmenu" style="display:none"></div>

