{{define "page/home"}}
{{template "common/header" .}}
{{template "common/menu" .}}
<div class="nb-container">
    <div class="ui container">
        <div class="ui four status cards">
            <div v-for='server in servers' class="card">
                <div class="content">
                    <div class="header"><i v-if='server.Host.CountryCode'
                            :class="server.Host.CountryCode + ' flag'"></i> @#server.Name#@
                        <i class="yellow info circle icon"></i>
                        <div class='ui content popup'>
                            系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
                                v-if='server.Host.Virtualization'>@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br>
                            CPU：@#server.Host.CPU#@<br>
                            硬盘：@#server.State.DiskUsed#@/@#server.State.DiskTotal#@<br>
                            内存：@#server.State.MemUsed#@/@#server.State.MemTotal#@<br>
                            交换：@#server.State.SwapUsed#@/@#server.State.SwapTotal#@<br>
                            流量：<i class='arrow alternate circle down outline icon'></i>@#server.State.NetInTransfer#@ <i
                                class='arrow alternate circle up outline icon'></i>@#server.State.NetOutTransfer#@<br>
                            启动：@#server.Host.BootTime#@<br>
                            版本：@#'v'+server.Host.Version#@<br>
                        </div>
                    </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.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">
                                <div class="ui active progress" :data-value="server.State.SwapUsed"
                                    :data-total="server.State.SwapTotal">
                                    <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.NetInSpeed#@/s
                                <i class="arrow alternate circle up outline icon"></i>
                                @#server.State.NetOutSpeed#@/s
                            </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">
                                <i class="clock icon"></i>@#server.State.Uptime#@
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{template "common/footer" .}}
<script>
    const servers = {{.Servers }};
    var statusCards = new Vue({
        el: 'div.status.cards',
        delimiters: ['@#', '#@'],
        data: {
            servers,
        },
        mounted() {
            $('.progress').progress();
            $('.yellow.info.icon').popup({
                popup: '.ui.content.popup'
            });
        },
        methods: {
        }
    });
</script>
{{end}}