{{define "page/home"}}
{{template "common/header" .}}
{{template "common/menu" .}}
<div class="nb-container">
    <div class="ui container">
        <div class="ui four status cards">
            {{range $server := .Servers}}
            <div class="card">
                <div class="content">
                    <div class="header">{{if $server.Host.CountryCode}}<i
                            class="{{$server.Host.CountryCode}} flag"></i>{{end}}{{$server.Name}}
                        <i data-html="
                        <div class='content'>
                                {{$server.Host}}
                                {{$server.State}}
                        </div>" class="yellow info circle icon"></i>
                    </div>
                    <div class="description">
                        <div class="ui grid">
                            <div class="three wide column">CPU</div>
                            <div class="thirteen wide column">
                                <div class="ui active progress" data-value="{{$server.State.CPU}}" data-total="100">
                                    <div class="bar">
                                        <div class="progress"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="three wide column">硬盘</div>
                            <div class="thirteen wide column">
                                <div class="ui active progress" data-value="{{$server.State.DiskUsed}}"
                                    data-total="{{$server.State.DiskTotal}}">
                                    <div class="bar">
                                        <div class="progress"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="three wide column">内存</div>
                            <div class="thirteen wide column">
                                <div class="ui active progress" data-value="{{$server.State.MemUsed}}"
                                    data-total="{{$server.State.MemTotal}}">
                                    <div class="bar">
                                        <div class="progress"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="three wide column">网络</div>
                            <div class="thirteen wide column">
                                <i class="arrow alternate circle down outline icon"></i>{{$server.State.NetIn|bf}}
                                <i class="arrow alternate circle up outline icon"></i>{{$server.State.NetOut|bf}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{end}}
        </div>
    </div>
</div>
{{template "common/footer" .}}
<script>
    $('.yellow.info.circle.icon').popup();
    $('.progress').progress();
</script>
{{end}}