{{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="https://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}}
