<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">
	<title>WebAdmin</title>

	<!-- CSS -->
	<link href="css/magic-bootstrap.css" rel="stylesheet">
	<link href="css/bootstrap-switch.min.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet">


	<!-- Javascript -->
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/bootstrap-table.min.js"></script>
	<script src="js/Chart.min.js"></script>
	<script src="js/bootstrap-switch.min.js"></script>

	<script>
		$.(function(){
			$("input .switch[type='checkbox']").bootstrapSwitch();
		});
	</script>
</head>
<body>
<!-- Top Bar -->
<nav id="top-bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
	<a class="navbar-brand" href="#">{{title}}</a>
	<ul class="nav navbar-nav">
		{{#top-nav}}
		{{^.sub_navs.length}}
		<li><a href="{{.url}}">{{.name}}</a></li>
		{{/.sub_navs.length}}
		{{#.sub_navs.length}}
		<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">
				{{.name}} <b class="caret"></b>
			</a>
			<ul class="dropdown-menu">
				{{#.sub_navs}}
				<li><a href="{{.url}}">{{.name}}</a></li>
				{{/.sub_navs}}
			</ul>
		</li>
		{{/.sub_navs.length}}
		{{/top-nav}}
	</ul>
</nav>

<div>
	<!-- Side Bar -->
	{{#side-nav-show}}
	<div id="side-bar" class="col-md-2">
		<ul class="side-menu nav nav-pills nav-stacked">
			{{#side-nav}}
			{{^.sub_navs.length}}
			<li><a href="{{.url}}">{{.name}}</a></li>
			{{/.sub_navs.length}}
			{{#.sub_nav.length}}
			<li class="">
				<a data-toggle="collapse" data-parent="#side-bar" href="#{{.name}}_collapse">
					{{.name}} <b class="caret"></b>
				</a>
				<ul id="{{.name}}_collapse" class="side-sub-menu collapse nav nav-pills nav-stacked ">
					{{#.sub_navs}}
					<li><a href="{{.url}}">{{.name}}</a></li>
					{{/.sub_navs}}
				</ul>
			</li>
			{{/.sub_nav.length}}
			{{/side-nav}}
		</ul>
	</div>
	{{/side-nav-show}}

	<!-- Main Container -->
	<div class="col-md-10">
		<!-- Page specific info -->
		<div class="row">
			<ol class="breadcrumb">
				{{#breadcrumb}}
				<li><a href="{{.url}}">{{.name}}</a></li>
				{{/breadcrumb}}
			</ol>
		</div>
		<!-- Alerts -->
		<div class="alert-container">
			{{#alerts}}
			<div class="alert alert-dismissable alert-{{.type}}">
				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
				{{.message}}
			</div>
			{{/alerts}}
		</div>

		<div class="container">
			{{content}}
		</div>
	</div>
</div>

<!--<footer class="footer">
    <div class="container">
        <p class="text-muted">{{footer}}</p>
    </div>
</footer>-->

</body>
</html>