<%#
 Copyright 2008 Steven Barth <steven@midlink.org>
 Copyright 2008-2010 Jo-Philipp Wich <jow@openwrt.org>
 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 ver  = require "luci.version"

	local sysinfo = util.ubus("system", "info") or { }
	local loadinfo = sysinfo.load or { 0, 0, 0 }
	local boardinfo = util.ubus("system", "board") or { }

	local node = disp.context.dispatched

	http.prepare_content("application/xhtml+xml")
-%>

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%=luci.i18n.context.lang%>" lang="<%=luci.i18n.context.lang%>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" />
<% if node and node.css then %><link rel="stylesheet" type="text/css" media="screen" href="<%=resource%>/<%=node.css%>" />
<% end -%>
<% if css then %><style title="text/css">
<%= css %>
</style>
<% end -%>
<script type="text/javascript" src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script>
<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
<script type="text/javascript" src="<%=resource%>/xhr.js"></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 handle_mainmenu_expand(ev) {
			var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling;

			document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) {
				if (li !== a.parentNode)
					li.classList.remove('active');
			});

			if (!ul2)
				return;

			if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth)
				ul2.classList.add('align-left');

			ul1.classList.add('active');
			a.parentNode.classList.add('active');
			a.blur();

			ev.preventDefault();
			ev.stopPropagation();
		}

		function render_mainmenu(tree, url, level) {
			var l = (level || 0) + 1,
			    ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }),
			    children = get_children(tree);

			if (children.length == 0 || l > 2)
				return E([]);

			for (var i = 0; i < children.length; i++) {
				var isActive = (L.env.dispatchpath[l] == children[i].name),
				    activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : '');

				ul.appendChild(E('li', { 'class': activeClass }, [
					E('a', {
						'href': L.url(url, children[i].name),
						'click': (l == 1) ? handle_mainmenu_expand : null,
					}, [ _(children[i].title) ]),
					render_mainmenu(children[i], url + '/' + children[i].name, l)
				]));
			}

			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(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': 'cbi-tabmenu' }),
			    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 ? ' cbi-tab' : '',
				    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 (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.context.authsession and 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>
<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
</head>
<body class="lang_<%=luci.i18n.context.lang%>" data-page="<%= table.concat(disp.context.requestpath, "-") %>">

<p class="skiplink">
<span id="skiplink1"><a href="#navigation"><%:Skip to navigation%></a></span>
<span id="skiplink2"><a href="#content"><%:Skip to content%></a></span>
</p>

<div id="menubar">
<h2 class="navigation"><a id="navigation" name="navigation"><%:Navigation%></a></h2>

<div class="hostinfo">
	<%=(boardinfo.hostname or "?")%> | <%=ver.distversion%> |
	<%:Load%>: <%="%.2f" % (loadinfo[1] / 65535.0)%> <%="%.2f" % (loadinfo[2] / 65535.0)%> <%="%.2f" % (loadinfo[3] / 65535.0)%>
	<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
		| <%:Auto Refresh%>:
		<span id="xhr_poll_status_on"><%:on%></span>
		<span id="xhr_poll_status_off" style="display:none"><%:off%></span>
	</span>
</div>

<ul id="modemenu" style="display:none"></ul>

<div class="clear"></div>
</div>

<div id="maincontainer">
	<div id="mainmenu" style="display:none"></div>

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

		<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>

		<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and category ~= "failsafe" 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 class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
			<% end %>
		</div>
		<%- end -%>
