{{define "theme-server-status/home-group-true"}}
<table class="table table-striped table-condensed table-hover">
    <thead>
    <tr class="node-group-tag">
        <th colspan="16" style="border:none;">@#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@</th>
    </tr>
    <tr class="node-group-cell">
        <th class="node-cell status center">{{tr "Status"}}</th>
        <th class="node-cell name center">{{tr "Name"}}</th>
        <th class="node-cell os center">{{tr "Platform"}}</th>
        <th class="node-cell location center">{{tr "Location"}}</th>
        <th v-if="group.data.some(item => item.additional && item.additional.price && Object.keys(item.additional.price).length > 0)" class="node-cell price center">{{tr "Price"}}</th>
        <th class="node-cell uptime center">{{tr "Uptime"}}</th>
        <th class="node-cell load center">{{tr "Load"}}</th>
        <th class="node-cell network center">{{tr "NetSpeed"}}↓|↑</th>
        <th class="node-cell traffic center">{{tr "NetTransfer"}}↓|↑</th>
        <th class="node-cell cpu center">{{tr "CpuUsed"}}</th>
        <th class="node-cell memory center">{{tr "MemUsed"}}</th>
        <th class="node-cell hdd center">{{tr "DiskUsed"}}</th>
        <th v-if="group.data.some(item => item.additional && item.additional.remaining && Object.keys(item.additional.remaining).length > 0)" class="node-cell remaining center">{{tr "Remaining"}}</th>
    </tr>
    </thead>
    <tbody id="servers">
    <template v-for="(node,index) in group.data">
        <tr :id="'r'+node.ID" data-toggle="collapse" :data-target="'#rt'+node.ID" class="accordion-toggle"
            :class="index % 2 === 0 ? 'odd': 'even'" aria-expanded="false" @click="showCharts(node.ID)">
            <td class="node-cell status center">
                <div class="status-container">
                    <div v-if="node.online" class="status-icon online"></div>
                    <div v-else class="status-icon offline"></div>
                </div>
            </td>
            <td class="node-cell name center">@#node.name#@</td>
            <td class="node-cell os center">
                <i v-if='isWindowsPlatform(node.host.Platform)' class="windows icon"></i>
                <i v-else-if='getFontLogoClass(node.host.Platform) == "" && node.stateuptime > 0' class="fl-tux"></i>
                <i v-else :class="'fl-' + getFontLogoClass(node.host.Platform)"></i>
                <span class="node-cell-os-text">@#getPlatformName(node.os)#@</span>
            </td>
            <td style="text-align: center;" class="node-cell location">
                <i :class="'fi fi-' + node.location"></i>
                <span class="node-cell-location-text text-uppercase">&nbsp;@#node.location#@</span>
            </td>
            <td v-if="group.data.some(item => item.additional && item.additional.price && Object.keys(item.additional.price).length > 0)" class="node-cell price center">
                <template v-if="node.additional && node.additional.price">
                    <span v-if="node.additional.price.amount == 0" class="node-cell-price-text">Free</span>
                    <span v-else class="node-cell-price-text">@#node.additional.price.amount#@@#(node.additional.price.cycle ? '/' + node.additional.price.cycle : '')#@</span>
                </template>
            </td>
            <td style="text-align: center;" class="node-cell uptime">@#node.uptime#@</td>
            <td style="text-align: center;" class="node-cell load">@#node.load#@</td>
            <td style="text-align: center;" class="node-cell network">@#node.network#@</td>
            <td style="text-align: center;" class="node-cell traffic">@#node.traffic#@</td>
            <td class="node-cell cpu">
                <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
                    <div :style="node.cpu.style" :class="node.cpu.class"><small>@#node.cpu.percent#@%</small>
                    </div>
                </div>
            </td>
            <td class="node-cell memory">
                <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
                    <div :style="node.memory.style" :class="node.memory.class">
                        <small>@#node.memory.percent#@%</small>
                    </div>
                </div>
            </td>
            <td class="node-cell hdd">
                <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
                    <div :style="node.hdd.style" :class="node.hdd.class"><small>@#node.hdd.percent#@%</small>
                    </div>
                </div>
            </td>
            <td v-if="group.data.some(item => item.additional && item.additional.remaining && Object.keys(item.additional.remaining).length > 0)" class="node-cell remaining">
                <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
                    <template v-if="node.additional && node.additional.remaining.format">
                        <div :style="node.additional.remaining.format.style" :class="node.additional.remaining.days == 'lifetime' ? '' : node.additional.remaining.format.class"></div>
                        <div class="additional">
                            <small v-if="node.additional.remaining.days == 'lifetime'">{{tr "Lifetime"}}</small>
                            <small v-else-if="node.additional.remaining.days < 0">{{tr "Expired"}}</small>
                            <small v-else>
                                <span class="node-cell-remaining-days">@#node.additional.remaining.days#@{{tr "Days"}}</span>
                                <span class="node-cell-remaining-percent">@#node.additional.remaining.percent#@%</span>
                            </small>
                        </div>
                    </template>
                </div>
            </td>
        </tr>
        <tr class="expandRow" :class="index % 2 === 0 ? 'odd': 'even'">
            <td colspan="16">
                <div class="accordian-body collapse" :id="'rt'+node.ID">
                    <div style="display: flex;left-items: center;justify-content: center;flex-direction: column; max-width: 89vw">
                        <span class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "Platform"}}:</span>
                            @#node.host.Platform#@-@#node.host.PlatformVersion#@
                            [<span v-if="node.host.Virtualization">@#node.host.Virtualization#@:</span>@#node.host.Arch#@]
                        </span>
                        <span class="node-cell-expand" v-if="node.host.CPU">
                            <span class="node-cell-expand-label">CPU:</span>
                            @#node.host.CPU.join(",")#@ (@#node.cpu.percent#@%)
                        </span>
                        <span class="node-cell-expand" v-if="node.host.GPU">
                            <span class="node-cell-expand-label">GPU:</span>
                            @#node.host.GPU.join(",")#@ 
                            (@#parseInt(node.state.GPU >=0 ? node.state.GPU : 0)#@%)
                        </span>
                        <span class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "DiskUsed"}}:</span>
                            @#formatByteSize(node.state.DiskUsed)#@ / @#formatByteSize(node.host.DiskTotal)#@ (@#node.hdd.percent#@%)
                        </span>
                        <span class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "MemUsed"}}:</span>
                            @#formatByteSize(node.state.MemUsed)#@ / @#formatByteSize(node.host.MemTotal)#@ (@#node.memory.percent#@%)
                        </span>
                        <span v-if="node.host.SwapTotal > 0" class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "SwapUsed"}}:</span>
                            @#formatByteSize(node.state.SwapUsed)#@ / @#formatByteSize(node.host.SwapTotal)#@
                            <span>(@#toFixed2(node.state.SwapUsed / node.host.SwapTotal * 100)#@%)</span>
                        </span>
                        <span v-else class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "SwapUsed"}}: OFF</span>
                        </span>
                        <span class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "NetTransfer"}}:</span>
                            <i class="arrow alternate circle down outline icon"
                               style="margin: 0"></i>@#formatByteSize(node.state.NetInTransfer)#@
                            <i class="arrow alternate circle up outline icon"
                               style="margin: 0"></i>@#formatByteSize(node.state.NetOutTransfer)#@
                        </span>
                        <span class="node-cell-expand load">
                            <span class="node-cell-expand-label">{{tr "Load"}}:</span>
                            @#toFixed2(node.state.Load1)#@ / @#toFixed2(node.state.Load5)#@ / @#toFixed2(node.state.Load15)#@
                        </span>
                        <span class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "ProcessCount"}}:</span>
                            @#node.state.ProcessCount#@
                        </span>
                        <span class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "ConnCount"}}:</span>
                            TCP @#node.state.TcpConnCount#@ / UDP @#node.state.UdpConnCount#@
                        </span>
                        <span class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "BootTime"}}:</span>
                            @#formatTimestamp(node.host.BootTime)#@
                        </span>
                        <span class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "LastActive"}}:</span>
                            @#new Date(node.lastActive).toLocaleString()#@
                        </span>
                        <span class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "Uptime"}}:</span>
                            @#node.uptime#@
                        </span>
                        <span v-if="node.state.Temperatures && getTemperature(node.state.Temperatures, sensorList) > 0" @click="toggleDetailedTemp(node.ID)" class="node-cell-expand temp-detail" :id="`temp-${node.ID}`" temp-detail-show="0">
                            <span class="node-cell-expand-label">{{tr "Temperature"}}:</span>
                            <span :id="`temp-main-${node.ID}`" class="node-cell-expand-label">
                                @#getTemperature(node.state.Temperatures, sensorList)#@°C
                                <i class="bi bi-chevron-double-down"></i>
                            </span>
                            <span :id="`temp-detail-${node.ID}`" class="node-cell-expand-label" style="display:none">
                                <span v-for="temp in node.state.Temperatures" :key="temp.Name" v-if="temp.Temperature !== 0">
                                   [ @#temp.Name#@ : @#temp.Temperature#@°C ]
                                </span>
                                <i class="bi bi-chevron-double-up"></i>
                            </span>
                        </span>
                        <span class="node-cell-expand">
                            <span class="node-cell-expand-label">{{tr "Version"}}:</span>
                            @#node.host.Version#@
                        </span>
                        <span class="node-echarts-expand">
                            <div class="chartbox" :id="`chart-${node.ID}`" chartbox-show="0" :key="node.ID" style="width: 100%; height: auto;"></div>
                        </span>
                    </div>
                </div>
            </td>
        </tr>
    </template>
    </tbody>
</table>
{{end}}