{{define "theme-mdui/service"}}
<!doctype html>
<html lang="{{.Conf.Language}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>{{.Title}}</title>
<link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20210804" />
<!-- MDUI CSS -->
<link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/mdui/1.0.2/css/mdui.min.css"/>
<link rel="stylesheet" href="/static/theme-mdui/mdui.css" type="text/css">
{{if ts .CustomCode}}
{{.CustomCode|safe}}
{{end}}
</head>
<body>
{{template "theme-mdui/menu" .}}
<!-- Container -->
<div id="container" class="mdui-container mdui-m-t-1">
<div class="mdui-table-fluid">
<table class="mdui-table mdui-table-hoverable">
<thead>
<tr>
<th class="mdui-text-center">{{tr "Name"}}</th>
<th class="mdui-text-center" mdui-tooltip="{content: 'The status of last 30 days', position: 'top'}">{{tr "Availability"}}</th>
<th class="mdui-text-center">{{tr "30DaysOnline"}}</th>
<th class="mdui-text-center">{{tr "Status"}}</th>
</tr>
</thead>
<tbody>
{{range $service := .Services}}
<tr>
<td class="mdui-text-center"><strong>{{$service.Monitor.Name}}</strong></td>
<td class="mdui-text-center">{{$service.TotalUptime|float32f}}%</td>
<td>
{{range $i,$d := $service.Delay}}
{{$percent := (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}
{{if eq $percent 0.0}}
<i class="mdui-icon material-icons" mdui-tooltip="{content: '{{dayBefore $i}},{{tr "Availability"}}:{{float32f (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}%,{{tr "AverageLatency"}}:{{float32f $d}}ms'}">favorite_border</i>
{{else if ge $percent 95.0}}
<i class="mdui-icon material-icons mdui-text-color-red-a700" mdui-tooltip="{position: 'top', content: '{{dayBefore $i}},{{tr "Availability"}}:{{float32f (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}%,{{tr "AverageLatency"}}:{{float32f $d}}ms'}">favorite</i>
{{else if ge $percent 80.0}}
<i class="mdui-icon material-icons mdui-text-color-orange" mdui-tooltip="{content: '{{dayBefore $i}},{{tr "Availability"}}:{{float32f (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}%,{{tr "AverageLatency"}}:{{float32f $d}}ms'}">favorite</i>
{{else}}
<i class="mdui-icon material-icons mdui-text-color-black" mdui-tooltip="{content: '{{dayBefore $i}},{{tr "Availability"}}:{{float32f (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}%,{{tr "AverageLatency"}}:{{float32f $d}}ms'}">favorite</i>
{{end}}
{{end}}
</td>
<td class="mdui-text-center">
{{$percent := (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}
{{if eq $percent 0.0}}
<i class="mdui-icon material-icons mdui-text-color-black">sentiment_neutral</i>
<p>{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}</p>
{{else if ge $percent 95.0}}
<div class="mdui-spinner mdui-spinner-colorful"></div>
<p>{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}</p>
{{else if ge $percent 80.0}}
<i class="mdui-icon material-icons mdui-text-color-orange">sentiment_dissatisfied</i>
<p>{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}</p>
{{else}}
<i class="mdui-icon material-icons mdui-text-color-red-a700">sentiment_very_dissatisfied</i>
<p>{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}</p>
{{end}}
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
{{if .CycleTransferStats}}
<h2 class="mdui-m-t-5 mdui-text-center">{{tr "CycleTransferStats"}}</h2>
<div class="mdui-table-fluid">
<table class="mdui-table mdui-table-hoverable">
<thead>
<tr>
<th class="mdui-text-center">ID</th>
<th class="mdui-text-center">{{tr "Rules"}}</th>
<th class="mdui-text-center">{{tr "Server"}}</th>
<th class="mdui-text-center">{{tr "From"}}</th>
<th class="mdui-text-center">{{tr "To"}}</th>
<th class="mdui-text-center">MAX</th>
<th class="mdui-text-center">MIN</th>
<th class="mdui-text-center">{{tr "NextCheck"}}</th>
<th class="mdui-text-center">{{tr "CurrentUsage"}}</th>
</tr>
</thead>
<tbody>
{{range $id, $stats := .CycleTransferStats}}
{{range $innerId, $transfer := $stats.Transfer}}
<tr>
<td class="mdui-text-center">{{$id}}</td>
<td class="mdui-text-center">{{$stats.Name}}</td>
<td class="mdui-text-center">{{index $stats.ServerName $innerId}}</td>
<td class="mdui-text-center">{{$stats.From|tf}}</td>
<td class="mdui-text-center">{{$stats.To|tf}}</td>
<td class="mdui-text-center">{{$stats.Max|bf}}</td>
<td class="mdui-text-center">{{$stats.Min|bf}}</td>
<td class="mdui-text-center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
<td class="mdui-text-center">{{$transfer|bf}}</td>
</tr>
{{end}}
{{end}}
</tbody>
</table>
</div>
{{end}}
</div>
{{template "theme-mdui/footer" .}}
<script src="/static/theme-mdui/mdui.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/mdui/1.0.2/js/mdui.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.6.0/jquery.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
<script>
var container=document.querySelector("#container");
container.style.minHeight=window.innerHeight-document.body.clientHeight+container.clientHeight+'px';
mdui.mutation();
</script>
</body>
</html>
{{end}}