{{define "base"}}
<html>
	<head>
		<title>{{template "title" .}}</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
{{if not .LocalJSPath}}
		<link href='//fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
		<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
{{else}}
		<style type="text/css">
			/* Generated with https://google-webfonts-helper.herokuapp.com */
			/* lato-regular - latin */
			@font-face {
			  font-family: 'Lato';
			  font-style: normal;
			  font-weight: 400;
			  src: url('{{.LocalJSPath}}/fonts/lato-v14-latin-regular.eot'); /* IE9 Compat Modes */
			  src: local('Lato Regular'), local('Lato-Regular'),
			       url('{{.LocalJSPath}}/fonts/lato-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			       url('{{.LocalJSPath}}/fonts/lato-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
			       url('{{.LocalJSPath}}/fonts/lato-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
			       url('{{.LocalJSPath}}/fonts/lato-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
			       url('{{.LocalJSPath}}/fonts/lato-v14-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
			}

			/* lato-900 - latin */
			@font-face {
			  font-family: 'Lato';
			  font-style: normal;
			  font-weight: 900;
			  src: url('{{.LocalJSPath}}/fonts/lato-v14-latin-900.eot'); /* IE9 Compat Modes */
			  src: local('Lato Black'), local('Lato-Black'),
			       url('{{.LocalJSPath}}/fonts/lato-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			       url('{{.LocalJSPath}}/fonts/lato-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
			       url('{{.LocalJSPath}}/fonts/lato-v14-latin-900.woff') format('woff'), /* Modern Browsers */
			       url('{{.LocalJSPath}}/fonts/lato-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
			       url('{{.LocalJSPath}}/fonts/lato-v14-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
			}
		</style>
		<link href="{{.LocalJSPath}}/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
{{end}}
		<style type="text/css">
			body {
				margin: 0px;
				background: #fff;
			}
			#wrapper {
				min-height:100%;
				position:relative;
			}
			#header {
				position: fixed;
				height: 50px;
				width: 100%;
				top: 0px;
				background: #2980b9;
				border-bottom:1px solid #dedede;
				margin: 0px auto;
				padding-left: 10px;
				font-family: 'Lato', sans-serif;
				font-weight: 900;
				display: table;
				z-index: 10000;
			}
			#content {
				margin: 60px 1em 1em 1em;
				font-family: 'Lato', sans-serif;
				font-weight: 400;
				padding-bottom: 20px;
			}
			#footer {
				text-align: center;
				vertical-align: bottom;
				height: 20px;
				bottom: 0;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 0.8em;
			}
			.title {
				text-shadow: 1px 2px 2px #2980b9, 0 0 0 #000, 1px 2px 2px #2980b9;
				color: rgba(255, 255, 255, 0.8);
				font-size: 30px;
				display: table-cell;
				vertical-align: middle;
				white-space: nowrap;
				width: 1px;
			}
			a.title {
				color: inherit;
			}
			.headline {
				color: #eee;
				font-size: 20px;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
			.alt tr:nth-child(even) {
				background-color: #F4F4F4;
			}
			.alt tr:nth-child(odd) {
				background-color: #FAFAFA;
			}
			a:link {
				color: #4078C0;
				text-decoration: none;
			}
			a:visited {
				color: #4078C0;
				text-decoration: none;
			}
			a:hover {
				color: #4078C0;
				text-decoration: underline;
			}
			a:active {
				color: #4078C0;
				text-decoration: underline;
			}
		</style>
{{template "head" .}}
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<div class="title">
					<a href="http://github.com/etix/mirrorbits" target="_blank" style="text-decoration: none; color: inherit;">Mirrorbits <i class="fa fa-globe" style="vertical-align: middle;" aria-hidden="true"></i></a>
				</div>
				<div class="headline">{{template "headline" .}}</div>
			</div>
			<div id="content">
{{template "body" .}}
			</div>
			<div id="footer">
			Mirrorbits {{version}} running on {{hostname}}
			</div>
		</div>
	</body>
</html>
{{end}}