{{template "header.tpl" .}}

	<div class="cf-container">

		<div class="row">
			<div class="col-sm-12 cf-flexcenter">
				<div class="cf-pl-crit{{if not .critCount}} alzero{{end}}" onclick="setTableFilter('#id-table', 'CRIT');return false;">
					<div class="cf-pl-title">
						Critical
					</div>
					<div class="cf-pl-value">
						{{.critCount}}
					</div>
				</div>
				<div class="cf-pl-warn{{if not .warnCount}} alzero{{end}}" onclick="setTableFilter('#id-table', 'WARN');return false;">
					<div class="cf-pl-title">
						Warning
					</div>
					<div class="cf-pl-value">
						{{.warnCount}}
					</div>
				</div>
				<div class="cf-pl-down{{if not .downCount}} alzero{{end}}" onclick="setTableFilter('#id-table', 'DOWN');return false;">
					<div class="cf-pl-title">
						Down
					</div>
					<div class="cf-pl-value">
						{{.downCount}}
					</div>
				</div>
			</div>
		</div>

	</div><!-- container -->

	<div class="cf-container container-fluid">
		<div class="row">
			<div id="id-has-alerts" class="col-sm-12" style="display: none">
				<div style="padding: 18px 18px 54px 18px">
					<table id="id-table" class="table table-striped dt-responsive">
						<thead>
							<tr>
								<th width="5%">!</th>
								<th width="15%">Dashboard</th>
								<th width="15%">Graph</th>
								<th width="15%">Metric</th>
								<th>Problem</th>
							</tr>
						</thead>
						<tbody id="id-tbody">
						</tbody>
					</table>
				</div>
			</div><!-- col sm 12 -->
			<div id="id-no-alerts" class="col-sm-12" style="display: none; text-align: center">
				There are currently no open alerts.
			</div><!-- col sm 12 -->
		</div><!-- row -->

	</div><!-- container -->

{{template "footer-pre.tpl" .}}
<script type="text/javascript">
var alerts = {{.alerts}}, graphs = {{.graphs}}, dashes = {{.dashes}}, downs = {{.downs}};
</script>
<script src="/js/alerts-min.js" type="text/javascript"></script>
{{template "footer-post.tpl" .}}