<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<title>Microservice Monitor</title>

	<meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="shortcut icon" type="image/png" href="/static/images/favicon.png" />

	<!-- frontend bower dependency specific files -->
	<link rel="stylesheet" href="/static/libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css" />
    <link rel="stylesheet" href="/static/libs/chosen/chosen.min.css" />
    <link rel="stylesheet" href="/static/libs/bootstrap-datepicker/css/datepicker3.css" />

	<!-- frontend application specific files -->
	<link rel="stylesheet" href="/static/css/main.css" />
	<link rel="stylesheet" href="/static/css/traces.css" />
	<link rel="stylesheet" href="/static/css/trace.css" />
	<link rel="stylesheet" href="/static/css/summary.css" />

</head>

<body>
	<div role="navigation" class="navbar navbar-default navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-vmsm-navbar" aria-expanded="false">
			        <span class="sr-only">Toggle navigation</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
		    	</button>

				<a class="navbar-brand" href="/">
					<img alt="Varnish Microservice Monitor" src="/static/images/favicon.png">
				</a>
				<a class="navbar-brand" href="/">
					Varnish Microservice Monitor
				</a>
			</div>

			<div class="collapse navbar-collapse navbar-right">
				<ul class="nav navbar-nav">
					<li class="active">
						<a href="/">
							<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
							&nbsp;Find a Trace
						</a>
					</li>
					<li class="hide">
						<a href="#">
							<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
							&nbsp;Aggregates
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="content">
			{% block content %}{% endblock %}
		</div>
	</div>

	<div id="fullPageSpinner">
      <div class="progress progress-striped active">
        <div class="progress-bar" style="width: 100%">Working...</div>
      </div>
    </div>

	<!-- javascript references -->

	<!--[if lt IE 9]>
	<script src="/static/libs/es5-shim/es5-sham.js"></script>
	<script src="/static/libs/es5-shim/es5-shim.js"></script>
	<![endif]-->

	<script src="/static/libs/underscore/underscore-min.js"></script>
	<script src="/static/libs/jquery/dist/jquery.min.js"></script>
	<script src="/static/libs/jquery-timeago/jquery.timeago.js"></script>
	<script src="/static/libs/jquery-cookie/jquery.cookie.js"></script>
	<script src="/static/libs/chosen/chosen.jquery.min.js"></script>
	<script src="/static/libs/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	<script src="/static/libs/momentjs/min/moment.min.js"></script>

	<!-- twitter bootstrap -->
	<script src="/static/libs/bootstrap/dist/js/bootstrap.min.js"></script>

	<!-- require.js -->
	<script data-main="/static/js/main.js" src="/static/libs/requirejs/require.js"></script>

	<!-- TODO:// Live Reload : needs to be removed in distrubution -->
	<script src="http://127.0.0.1:35729/livereload.js"></script>

</body>
</html>
