---
// Port of preview/pages/uptime.html.
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Chart from '@shared/components/Chart.astro';
---

<DefaultLayout pageHeaderFile="uptime" pageMenu="extra.uptime" pageLibs={['apexcharts']}>
	<div class="row row-cards">
		<div class="col-md-4">
			<div class="card">
				<div class="card-body">
					<div class="subheader">Currently up for</div>
					<div class="h3 m-0">14 days 2 hours 54 mins 34 seconds</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="card">
				<div class="card-body">
					<div class="subheader">Last checked at</div>
					<div class="h3 m-0">27 seconds ago</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="card">
				<div class="card-body">
					<div class="subheader">Incidents</div>
					<div class="h3 m-0">3</div>
				</div>
			</div>
		</div>
		<div class="col-md-8">
			<div class="card">
				<div class="card-body">
					<h3 class="card-title">Response times across regions in the last day</h3>
					<Chart chartId="uptime" height={15} />
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="card">
				<div class="card-body">
					<h3 class="card-title">Uptime incidents per day</h3>
					<Chart chartId="uptime-incidents" height={15} />
				</div>
			</div>
		</div>
		<div class="col-12">
			<div class="card">
				<div class="card-table table-responsive">
					<table class="table">
						<thead>
						<tr>
							<th>Time period</th>
							<th>Availability</th>
							<th>Downtime</th>
							<th>Incidents</th>
							<th>Longest incident</th>
							<th>Avg. incident</th>
						</tr>
						</thead>
						<tbody><tr>
							<td>Today</td>
							<td>98.9533%</td>
							<td>1 minute</td>
							<td>1</td>
							<td>1 minute</td>
							<td>1 minute</td>
						</tr>
						<tr>
							<td>Last 7 days</td>
							<td>98.9533%</td>
							<td>1 minute</td>
							<td>1</td>
							<td>1 minute</td>
							<td>1 minute</td>
						</tr>
						<tr>
							<td>Last 30 days</td>
							<td>98.9533%</td>
							<td>1 minute</td>
							<td>1</td>
							<td>1 minute</td>
							<td>1 minute</td>
						</tr>
						<tr>
							<td>Last 365 days</td>
							<td>98.9533%</td>
							<td>1 minute</td>
							<td>1</td>
							<td>1 minute</td>
							<td>1 minute</td>
						</tr>
						<tr>
							<td>All time</td>
							<td>98.9533%</td>
							<td>1 minute</td>
							<td>1</td>
							<td>1 minute</td>
							<td>1 minute</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>