<?xjs

    load('modopts.js');
    var settings = get_mod_options('web');

	load('xjs.js');
	load(settings.web_directory + '/lib/init.js');
	load(settings.web_lib + 'auth.js');
	load(settings.web_lib + 'pages.js');
	load(settings.web_lib + 'sidebar.js');
	load(settings.web_lib + 'language.js');

	var _language = getLanguage(settings.language_file || 'english.ini', 'main');

	var page = (
		(	typeof http_request.query.page === 'undefined' ||
			!file_exists(
				fullpath(
					settings.web_pages + http_request.query.page[0]
				)
			) ||
			fullpath(
				settings.web_pages + http_request.query.page[0]
			).indexOf(fullpath(settings.web_pages)) !== 0
		)
		? '000-home.xjs'
		: http_request.query.page[0]
	);

	var page_ctrl = getCtrlLine(settings.web_pages + page);

	function writePage() {
		var ini = getWebCtrl(
			settings.web_pages +  '/' + page.replace(file_getname(page), '')
		);
		if ((typeof ini === "boolean" && !ini) || webCtrlTest(ini, page)) {
			write(getPage(page));
		}
	}

?>

<?xjs function _subMenu(obj, title, path) { ?>
	<li class="dropdown<?xjs if (path.match(/\//g).length > 1) write('-submenu'); ?>">
		<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
			<?xjs write(title.replace(/^.*\-/, '')); ?>
			<span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<?xjs _menu(obj, path); ?>
		</ul>
	</li>
<?xjs } ?>

<?xjs
	function _menu(obj, path) {
		Object.keys(obj).forEach(
			function (e) {
				if (typeof obj[e] === 'object') {
					_subMenu(obj[e], e, (path || '') + e + '/');
				} else {
?>
				<li>
					<a href="./?page=<?xjs write((path || '') + obj[e]); ?>">
						<?xjs write(e); ?>
					</a>
				</li>
<?xjs
				}
			}
		);
	}
?>

<?xjs function _sidebar() {
		if (settings.layout_sidebar_off || page_ctrl.options.no_sidebar) return;
?>
	<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
		<?xjs writeSidebarModules(); ?>
	</div>
<?xjs } ?>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" href="./images/favicon.ico">
		<title>
			<?xjs write(page_ctrl.title); ?>
			:
			<?xjs write(system.name); ?>
		</title>
		<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link href="./css/offcanvas.css" rel="stylesheet">
		<link href="./css/style.css" rel="stylesheet">
		<?xjs if (file_exists(settings.web_root + 'css/custom.css')) { ?>
			<link href="./css/custom.css" rel="stylesheet">
		<?xjs } ?>
	</head>

	<body>

		<script src="./js/jquery.min.js"></script>
		<script src="./bootstrap/js/bootstrap.min.js"></script>
		<script src="./js/common.js"></script>

		<div class="modal" id="popUpModal" tabindex="-1" role="dialog" style="display:none;">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" id="popUpModalTitle">
							Pop-Up Thingie
						</h4>
					</div>
					<div class="modal-body" id="popUpModalBody"></div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" id="popUpModalCloseButton">
							<?xjs write(_language.button_close); ?>
						</button>
						<button type="button" class="btn btn-primary" id="popUpModalActionButton" hidden>
							<?xjs write(_language.button_submit); ?>
						</button>
					</div>
				</div>
			</div>
		</div>

		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container<?xjs if (settings.layout_full_width) write('-fluid'); ?>">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
						<span class="sr-only">
							<?xjs write(_language.label_sidebar); ?>
						</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="./">
						<?xjs write(settings.brand || system.name); ?>
					</a>
				</div>
				<div id="navbar" class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<?xjs _menu(getPageList(settings.web_pages)); ?>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<?xjs if (user.alias === settings.guest || user.number < 1) { ?>
							<?xjs if (settings.user_registration) { ?>
								<li>
									<a href="./?page=000-register.xjs">
										<?xjs write(_language.menu_item_register); ?>
									</a>
								</li>
							<?xjs } ?>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
									<?xjs write(_language.menu_item_login); ?>
									<span class="caret"></span>
								</a>
								<div id="login-form" class="dropdown-menu" style="padding:15px; padding-bottom:0px;">
									<form id="form-login">
										<label for="input-username" class="sr-only">
											<?xjs write(_language.input_username); ?>
										</label>
										<input id="input-username" title="<?xjs write(_language.input_username); ?>" type="text" class="dropdown form-control" placeholder="<?xjs write(_language.input_username); ?>">
										<label for="input-password" class="sr-only">
											<?xjs write(_language.input_password); ?>
										</label>
										<input id="input-password" title="<?xjs write(_language.input_password); ?>" type="password" class="dropdown form-control" placeholder="<?xjs write(_language.input_password); ?>">
										<input id="button-login" class="dropdown btn btn-primary" type="submit" value="<?xjs write(_language.button_login); ?>">
									</form>
								</div>
							</li>
						<?xjs } else { ?>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
									<?xjs write(user.alias); ?>
									<span class="badge scanned" title="Unread mail" id="badge-unread-mail"></span>
									<span class="caret"></span>
								</a>
								<ul class="dropdown-menu">
									<li>
										<a href="./?page=000-mail.xjs">
											<?xjs write(_language.menu_item_mail); ?>
											<span class="badge scanned" title="<?xjs write(_language.label_unread_mail); ?>" id="badge-unread-mail-inner"></span>
										</a>
									</li>
									<li>
										<a id="button-logout" href="#">
											<?xjs write(_language.menu_item_logout); ?>
										</a>
									</li>
								</ul>
							</li>
						<?xjs } ?>
					</ul>
				</div>
			</div>
		</nav>

		<div class="container<?xjs if (settings.layout_full_width) write('-fluid'); ?>">
			<div class="row row-offcanvas row-offcanvas-<?xjs write(settings.layout_sidebar_left ? 'left' : 'right'); ?>">
				<?xjs if (settings.layout_sidebar_left) _sidebar(); ?>
				<div class="col-xs-12 col-sm-<?xjs write(settings.layout_sidebar_off || page_ctrl.options.no_sidebar ? 12 : 9); ?>">
					<div style="clear:both;">
					<p class="pull-<?xjs write(settings.layout_sidebar_left ? 'left' : 'right'); ?> visible-xs">
						<button title="Toggle sidebar" type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><span class="glyphicon glyphicon-tasks"></span><?xjs write(_language.label_sidebar); ?></button>
					</p>
					</div>
					<?xjs writePage(); ?>
				</div>
				<?xjs if (!settings.layout_sidebar_left || settings.layout_sidebar_right) _sidebar(); ?>
			</div>
		  	<hr>
			<footer>
			<p>&copy; <?xjs write(system.name + ", " + strftime("%Y")); ?></p>
			</footer>
		</div>

		<script src="./js/offcanvas.js"></script>

	<script>
		$(document).ready(
			function () {
				$('a.dropdown-toggle').on(
					"click", function (e) {
						$(this).next('ul').toggle();
						$(this).next('div').toggle();
						e.stopPropagation();
						e.preventDefault();
					}
				);
			}
		);
	</script>

	</body>

</html>
