{{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}}
