@using Monithor.api
@{
	var statusPage = (StatusPage) ViewData["statuspage"];
	var monitors = statusPage.Monitors.Select(p => p.monitor);
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<meta http-equiv="refresh" content="60">
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" id="viewport" name="viewport">
	<title>
		@statusPage.Name status
	</title>

	@if (monitors.All(p => p.Status is MonitorStatus.Up or MonitorStatus.Validating)) {
		<link rel="shortcut icon" type="image/x-icon" href="/assets/up_small.png"/>
	}
	else {
		<link rel="shortcut icon" type="image/x-icon" href="/assets/down_small.png"/>
	}
	<link href="https://@statusPage.Route/" rel="canonical">

	<link rel="stylesheet" media="all" href="/css/status.css"/>
</head>

<body class="status-page">

<main class="main">
	<div class="status-page-container pt-2 pb-5">
		<navbar class="navbar status-header">
			<a class="d-flex flex-nowrap align-items-center" href="/">
				<div class="status-header-brand">@statusPage.Name</div>
				<span class="status-header-label">Status</span>
			</a>
			<div>
			</div>
		</navbar>

		<div class="status-page-overview">
			@if (monitors.All(p => p.Status is MonitorStatus.Up or MonitorStatus.Validating)) {
				<img class="status-page-overview-icon" src="/assets/up_large.png" alt="up"/>
				<h1 class="status-page-title">All services are online</h1>
			}
			else if (monitors.All(p => p.Status is MonitorStatus.Down or MonitorStatus.Recovering)) {
				<img class="status-page-overview-icon" src="/assets/down_large.png" alt="down"/>
				<h1 class="status-page-title">All services are down</h1>
			}
			else {
				<img class="status-page-overview-icon" src="/assets/down_large.png" alt="down"/>
				<h1 class="status-page-title">Some services are down</h1>
			}
			<p class="status-page-updated-at text-muted">Last updated @DbProxy.LastUpdated</p>
		</div>

		@RenderBody()

		<div class="card status-page-resources-card">
			<div class="card-header d-flex flex-column flex-md-row justify-content-between align-items-md-center">
				<b class="card-title">Current status by service</b>
			</div>
			<div class="card-body">
				<div class="status-page-resource-list">
					<div data-onload="initTooltips()">
						@foreach (var (monitor, displayName) in statusPage.Monitors) {
							<div class='status-page-resource'>
								<div class='d-flex flex-column'>
									<div class='d-flex flex-column flex-md-row justify-content-between'>
										<div class='d-flex align-items-center'>
											@if (monitor.Status is MonitorStatus.Up) {
												<img style="width: 16px;" class="mr-2" src="/assets/up_small.png" alt="up"/>
												@displayName
												<span class="text-muted">
													&nbsp;@monitor.Message
												</span>
											}
											else if (monitor.Status is MonitorStatus.Validating) {
												<img style="width: 16px;" class="mr-2" src="/assets/unmonitored_small.png" alt="hold"/>
												@displayName
												<span class="text-muted">
													&nbsp;@monitor.Message - @monitor.LastValue
												</span>
											}
											else if (monitor.Status is MonitorStatus.Recovering) {
												<img style="width: 16px;" class="mr-2" src="/assets/unmonitored_small.png" alt="hold"/>
												@displayName
												<span class="text-muted">
													&nbsp;@monitor.Message
												</span>
											}
											else {
												<img style="width: 16px;" class="mr-2" src="/assets/down_small.png" alt="down"/>
												@displayName
												<span class="text-muted">
													&nbsp;@monitor.Message - @monitor.LastValue
												</span>
											}
										</div>
										<span class='text-muted'>
											@switch(monitor.Status) {
												case MonitorStatus.Unknown:
													@Html.Raw("Unknown");
													break;
												case MonitorStatus.Up:
													@Html.Raw("Operational");
													break;
												case MonitorStatus.Down:
													@Html.Raw("Down");
													break;
												case MonitorStatus.Validating:
													@Html.Raw("Validating downtime");
													break;
												case MonitorStatus.Recovering:
													@Html.Raw("Validating recovery");
													break;
												default:
													throw new ArgumentOutOfRangeException();
											}
											
											<!--
											99.999% uptime in the last 90 days
											-->
										</span>
									</div>
								</div>
								<!--
								<div class='status-page-resource-ticks mt-2'>
									<div class='status-page-resource-tick-inner status-page-tick-up'></div>
									<div class='status-page-resource-tick-inner status-page-tick-maintenance'></div>
									<div class='status-page-resource-tick-inner status-page-tick-down'></div>
									
									@@for (var i = 1; i <= 90; i++) {
										<div class='status-page-resource-tick'>
											<div class='status-page-resource-tick-inner status-page-tick-none'></div>
										</div>
									}
								</div>
								-->
							</div>
						}
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
</body>
</html>