<%#
	edge is a clean HTML5 theme for LuCI. It is based on luci-theme-material edge Template

	luci-theme-edge
	Copyright 2020 GaryPang <garyp@qq.com>

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

	luci-theme-material: 
	Copyright 2015 Lutty Yang <lutty@wcan.in>
	
	Agron Theme
	https://demos.creative-tim.com/edge-dashboard/index.html 

	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 fs	= require "nixio.fs"
	local nutil = require "nixio.util"
    
    
    
	-- send as HTML5
	http.prepare_content("text/html")
    
    math.randomseed(os.time())

-%>
<!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="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="theme-color" content="#09c">
	<meta name="msapplication-tap-highlight" content="no">
	<meta name="msapplication-TileColor" content="#09c">
	<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%>/waves.css?v=git-21.129.22910-fe3010c">
	<link rel="stylesheet" href="<%=media%>/cascade.css?v=git-21.129.22910-fe3010c">
	<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="<%=url('admin/translations', luci.i18n.context.lang)%>"></script>
	<script src="<%=resource%>/cbi.js?v=git-21.129.22910-fe3010c"></script>
	<script src="<%=resource%>/luci.js?v=git-21.129.22910-fe3010c"></script>
	<script src="<%=media%>/js/jquery.min.js?v=git-21.129.22910-fe3010c"></script>
		<script type="text/javascript">//<![CDATA[
	function EF() { return L.dom.create.apply(L.dom, arguments) }
		(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_mainmenu(tree, url, level) {
				var l = (level || 0) + 1,
				    ul = EF('ul', { 'class': level ? 'slide-menu' : 'nav' }),
				    children = get_children(tree);
				if (children.length == 0 || l > 2)
					return EF([]);
				for (var i = 0; i < children.length; i++) {
					var submenu = render_mainmenu(children[i], url + '/' + children[i].name, l),
					    hasChildren = submenu.children.length;
					ul.appendChild(EF('li', { 'class': hasChildren ? 'slide' : null }, [
						EF('a', {
							'href': hasChildren ? '#' : L.url(url, children[i].name),
							'class': hasChildren ? 'menu' : null,
							'data-title': hasChildren ?  children[i].title.replace(" ", "_") :  children[i].title.replace(" ", "_"),
						}, [ _(children[i].title) ]),
						submenu
					]));
				}
				if (l == 1) {
					var container = document.querySelector('#mainmenu');
					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(EF('li', {}, [
						EF('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 = EF('ul', { 'class': 'tabs' }),
				    children = get_children(tree),
				    activeNode = null;
				if (children.length == 0)
					return EF([]);
				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(EF('li', { 'class': className }, [
						EF('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
					]));
					if (isActive)
						activeNode = children[i];
				}
				container.appendChild(ul);
				container.style.display = '';
				if (activeNode)
					container.appendChild(render_tabmenu(activeNode, url + '/' + activeNode.name, l));
				return ul;
			}
			document.addEventListener('luci-loaded', function(ev) {
				var tree = <%= luci.http.write_json(luci.dispatcher.menu_json() or {}) %>,
				    node = tree,
				    url = '';
				render_modemenu(tree);
				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);
				}
			});
		})();
	//]]></script>
</head>

<body
	class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><% end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %>"
	data-page="<%= table.concat(disp.context.requestpath, "-") %>">

	<div class="main">
		<div style="" class="loading">
			<div class="sk-folding-cube">
				<div class="sk-cube1 sk-cube"></div>
				<div class="sk-cube2 sk-cube"></div>
				<div class="sk-cube4 sk-cube"></div>
				<div class="sk-cube3 sk-cube"></div>
			</div>
		</div>
		<div class="main-left" id="mainmenu" style="display:none">
			<div class="sidenav-header d-flex align-items-center">
				<a class="brand" href="#"><img src="<%=media%>/logo.png"></a>
				<div class="ml-auto">
					<!-- Sidenav toggler -->
					<div class="sidenav-toggler d-none d-xl-block active" data-action="sidenav-unpin"
						data-target="#sidenav-main">
						<div class="sidenav-toggler-inner">
							<i class="sidenav-toggler-line"></i>
							<i class="sidenav-toggler-line"></i>
							<i class="sidenav-toggler-line"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main-right">
		<hr/>
		<div id="indicators" class="pull-right"></div>
			<header class="bg-primary">
				<div class="fill">
					<div class="container">
						<a class="showSide"></a>
						<a class="brand" href="#"><img src="<%=media%>/logo.png"></a>

					</div>
				</div>
			</header>
			
			<div class="darkMask"></div>
			<div id="maincontent">
				<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 error">
						<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 class="right"><a class="btn"
								href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
						<% end %>
					</div>
					<%- end -%>

					<noscript>
						<div class="alert-message error">
							<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>
