{{define "theme-default/service"}}
{{template "common/header" .}}
{{if ts .CustomCode}}
{{.CustomCode|safe}}
{{end}}
{{template "common/menu" .}}
<div class="nb-container">
    <div class="ui container">
        <div class="service-status">
            <table class="ui celled table">
                <thead>
                    <tr>
                        <th class="ui center aligned">名称</th>
                        <th class="ui center aligned">30天在线率</th>
                        <th class="ui center aligned">详情</th>
                        <th class="ui center aligned">状态</th>
                    </tr>
                </thead>
                <tbody>
                    {{range $service := .Services}}
                    <tr>
                        <td class="ui center aligned">{{$service.Monitor.Name}}</td>
                        <td class="ui center aligned">
                            {{float32f (divU64 $service.TotalUp (addU64 $service.TotalUp $service.TotalDown))}}%
                        </td>
                        <td class="ui center aligned">{{range $i,$d := $service.Delay}}
                            <div class="ui icon button {{className (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}"
                                data-tooltip="{{dayBefore $i}}，在线率:{{float32f (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}%，平均延迟:{{float32f $d}}ms">
                            </div> {{end}}
                        </td>
                        <td class="ui center aligned delay-today">
                            <i
                                class="delay-today {{className (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}"></i>
                            {{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}
                        </td>
                    </tr> {{end}}
                </tbody>
            </table>

            {{if .CycleTransferStats}}

            <h2 style="text-align: center;">循环流量统计</h2>

            <table class="ui celled table">
                <thead>
                    <tr>
                        <th class="ui center aligned">ID</th>
                        <th class="ui center aligned">规则</th>
                        <th class="ui center aligned">服务器</th>
                        <th class="ui center aligned">自</th>
                        <th class="ui center aligned">至</th>
                        <th class="ui center aligned">下次刷新</th>
                        <th class="ui center aligned">流量</th>
                    </tr>
                </thead>
                <tbody>
                    {{range $id, $stats := .CycleTransferStats}}
                    {{range $innerId, $transfer := $stats.Transfer}}
                        <tr>
                            <td class="ui center aligned">{{$id}}</td>
                            <td class="ui center aligned">{{$stats.Name}}</td>
                            <td class="ui center aligned">{{index $stats.ServerName $innerId}}</td>
                            <td class="ui center aligned">{{$stats.From|tf}}</td>
                            <td class="ui center aligned">{{$stats.To|tf}}</td>
                            <td class="ui center aligned">{{(index $stats.NextUpdate $innerId)|tf}}</td>
                            <td class="ui center aligned">{{$transfer|bf}}</td>
                        </tr>
                    {{end}}
                    {{end}}
                </tbody>
            </table>

            {{end}}
        </div>
    </div>
</div>
{{template "common/footer" .}}
{{end}}