{{ define "overview-content" }}
{{ template "nav-sidebar" . }}
<div id="content">
{{ template "navbar-user" . }}
<section class="section dashboard-wrapper p-t-xxl">
	<div class="container">
		<div class="columns">
			<div class="column is-12-desktop">
				<h1 class="is-size-2 has-text-centered">Overview</h1>
			</div>
		</div>
		<div class="columns m-b-md"><div class="column is-12-desktop">
				<div class="columns is-centered">
					<div class="column is-4 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .Version }}</h3>
							<p>VERSION</p>
					</div>
					<div class="column is-4 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .Uptime }}</h3>
							<p>UPTIME</p>
					</div>
					<div class="column is-4 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .NumAlerts }}</h3>
							<p>ALERTS</p>
					</div>
				</div>
				<div class="columns is-centered">
					<div class="column is-4 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .UptimeRestartsWindow }}</h3>
							<p>RESTARTS ({{ .UptimeWindowDays }}D)</p>
					</div>
					<div class="column is-4 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .UptimeAvailabilityWin }}</h3>
							<p>AVAILABILITY ({{ .UptimeWindowDays }}D)</p>
					</div>
				</div>
				<div class="columns is-centered">
					<div class="column is-12 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .Hostname }}</h3>
							<p>HOSTNAME</p>
					</div>
				</div>
		</div></div>
		<hr/>
		<div class="columns">
			<div class="column is-12-desktop">
				<h1 class="is-size-2 has-text-centered">Resources</h1>
			</div>
		</div>
		<div class="columns m-b-md"><div class="column is-12-desktop">
				<div class="columns is-centered">
					<div class="column is-4 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .MaxTunnels }}</h3>
							<p>MAX TUNNELS</p>
					</div>
					<div class="column is-4 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .NumTunnels }}</h3>
							<p>TUNNELS</p>
					</div>
					<div class="column is-4 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .PortsPerTun }}</h3>
							<p>PORTS / TUNNEL</p>
					</div>
				</div>
		</div></div>
		<hr/>
		<div class="columns">
			<div class="column is-12-desktop">
				<h1 class="is-size-2 has-text-centered">Metrics</h1>
			</div>
		</div>
		<div class="columns m-b-md"><div class="column is-12-desktop">
				<div class="columns is-centered">
					<div class="column is-4 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .OnlineTunnels }}</h3>
							<p>ONLINE TUNNELS</p>
					</div>
					<div class="column is-4 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .Daily.String }}</h3>
							<p>DAILY</p>
					</div>
					<div class="column is-4 content is-medium has-text-centered">
							<h3 class="m-b-none">{{ .Monthly.String }}</h3>
							<p>MONTHLY</p>
					</div>
				</div>
		</div></div>
	</div>
</section>
<script>
setInterval(function() {
	location.reload();
}, 180000);
</script>
{{ template "menu-toggle" . }}
</div>
{{ end }}

{{ define "uptime-session" }}
{{ if .UptimeSessions }}
<div class="columns m-b-md"><div class="column is-12-desktop">
		<table class="table is-fullwidth is-striped">
			<thead>
				<tr>
					<th>Started</th>
					<th>Stopped</th>
					<th>Duration</th>
				</tr>
			</thead>
			<tbody>
			{{ range .UptimeSessions }}
				<tr>
					<td>{{ .Started.Format "2006-01-02 15:04:05" }}</td>
					<td>{{ if .Stopped }}{{ .Stopped.Format "2006-01-02 15:04:05" }}{{ else }}running{{ end }}</td>
					<td>{{ .DurationString }}</td>
				</tr>
			{{ end }}
			</tbody>
		</table>
</div></div>
{{ end }}
{{ end }}