{{define "theme-custom/service"}}
{{template "theme-custom/header" .}}
{{if ts .CustomCode}}
{{.CustomCode|safe}}
{{end}}
{{template "theme-custom/menu" .}}
<div class="nb-container">
    <div class="ui container">
        <div class="service-status">
            <table class="ui celled online table">
                <thead>
                    <tr>
                        <th class="ui center aligned">{{tr "Name"}}</th>
                        <th class="ui center aligned">{{tr "30DaysOnline"}}</th>
                        <th class="ui center aligned">{{tr "Details"}}</th>
                        <th class="ui center aligned">{{tr "Status"}}</th>
                    </tr>
                </thead>
                <tbody>
                    {{range $service := .Services}}
                    <tr>
                        <td class="ui center aligned">{{$service.Monitor.Name}}</td>
                        <td class="ui center aligned">
                            {{$service.TotalUptime|float32f}}%
                        </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-html="<p style='display:block; text-align: center; margin: 0'>{{dayBefore $i}}，{{tr "Availability"}}:{{float32f (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}%</p><p style='display: block; text-align: center; margin: 0'>{{tr "AverageLatency"}}:{{float32f $d}}ms</p>">
                            </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;">{{tr "CycleTransferStats"}}</h2>

            <table class="ui celled trans table">
                <thead>
                    <tr>
                        <th class="ui center aligned">{{tr "Rules"}}</th>
                        <th class="ui center aligned">{{tr "Server"}}</th>
                        <th class="ui center aligned">{{tr "From"}}</th>
                        <th class="ui center aligned">{{tr "To"}}</th>
                        <th class="ui center aligned">{{tr "NextCheck"}}</th>
                        <th class="ui center aligned">总流量</th>
                        <th class="ui center aligned">{{tr "CurrentUsage"}}</th>
                        <th class='ui center aligned' style='padding: 0px 31px 0px 31px;'>{{tr "Transleft"}}</th>
                    </tr>
                </thead>
                <tbody>
                    {{range $id, $stats := .CycleTransferStats}}
                    {{range $innerId, $transfer := $stats.Transfer}}
                    {{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
                        <tr>
                            <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)|sft}}</td>
                            <td class="ui center aligned">{{$stats.Max|bf}}</td>
                            <td class="ui center aligned">{{$transfer|bf}}</td>
                            <td class="ui center aligned" style="padding: 14px 0px 0px 0px; position: relative;"><div class="thirteen wide column"><div class="ui progress {{TransClassName $TransLeftPercent}}" style=" background: rgba(0,0,0,.1); background-color: rgba(0,0,0,.1)!important; height: 25px;"><div class="bar" style="transition-duration: 300ms; min-width: unset; background-color: rgb(10, 148, 242); width: {{$TransLeftPercent}}% !important;"></div><small style="position: relative; top: -2em;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small></div></div></td>
                    {{end}}
                    {{end}}
                </tbody>
            </table>

            {{end}}
        </div>
    </div>
</div>
{{template "theme-custom/footer" .}}
<script>
    var server = new Vue({
        el: '.nb-container',
        mounted() {
            $('.ui.icon.button').popup({
                position: 'top center'
            });
        },
    })
</script>
{{end}}