<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org" id = "html" lang = "en" th:attr = "theme = ${theme}, enableFog = ${enableFog}, backgroundColor = ${backgroundColor}">
    <head>
        <meta charset = "UTF-8">
        <title th:text = "${serverName}"></title>
        <link rel = "shortcut icon" type = "image/x-icon" th:href = "@{/img/ico/favicon.ico}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/assets/bootstrap.min.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/animations.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/colors.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/dimensions.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/fonts.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/gradients.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/layout.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/shadows.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/themes.css}" />
        <script type = "text/javascript" th:src = "@{/js/assets/chart.min.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/assets/three.min.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/assets/vanta.min.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/background.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/chart.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/globals.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/index.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/labels.js}"></script>
        <script type = "text/javascript" th:inline = "javascript"> globalsInitialization(); </script>
    </head>
    <body id = "background">
        <script type = "text/javascript" th:inline = "javascript"> backgroundInitialization(); </script>
        <div class = "container index">
            <div class = "row">
                <div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4">
                    <div class = "card">
                        <div class = "header">
                            <div class = "hw-logo first">
                                <img class = "hardware-icon" th:src = "@{/img/icons/processor.png}" />
                            </div>
                            <div class = "label-hw-info">
                                <div class = "hw-type">Processor</div>
                                <div class = "hw-name" th:text = "${info.processor.name}"></div>
                            </div>
                        </div>
                        <div class = "usage">
                            <div class = "main-hw-info">
                                <div class = "hw-usage">
                                    <div class = "usage-value">
                                        <span id = "processor-hundreds" class = "first">0</span>
                                        <span id = "processor-tens" class = "second">0</span>
                                        <span id = "processor-ones" class = "third">0</span>
                                    </div>
                                    <div class = "usage-postfix">%</div>
                                </div>
                                <p class = "info-label">PROCESSOR USAGE</p>
                                <div class = "usage-underline first"></div>
                            </div>
                        </div>
                        <div class = "footer first">
                            <div class = "detailed-hw-info">
                                <div class = "first" th:text = "${info.processor.coreCount}"></div>
                                <div id = "currentClockSpeed" class = "second" th:text = "${info.processor.clockSpeed}"></div>
                                <div class = "third" th:text = "${info.processor.bitDepth}"></div>
                            </div>
                            <div class = "dividers">
                                <div class = "first"></div>
                                <div class = "second"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4">
                    <div class = "card">
                        <div class = "header">
                            <div class = "hw-logo second">
                                <img class = "hardware-icon" th:src = "@{/img/icons/memory.png}" />
                            </div>
                            <div class = "label-hw-info">
                                <div class = "hw-type">Memory</div>
                                <div class = "hw-name" th:text = "${info.machine.operatingSystem}"></div>

                            </div>
                        </div>
                        <div class = "usage">
                            <div class = "main-hw-info">
                                <div class = "hw-usage">
                                    <div class = "usage-value">
                                        <span id = "ram-hundreds" class = "first">0</span>
                                        <span id = "ram-tens" class = "second">0</span>
                                        <span id = "ram-ones" class = "third">0</span>
                                    </div>
                                    <div class = "usage-postfix">%</div>
                                </div>
                                <p class = "info-label">MEMORY USAGE</p>
                                <div class = "usage-underline second"></div>
                            </div>
                        </div>
                        <div class = "footer second">
                            <div class = "detailed-hw-info">
                                <div class = "first" th:text = "${info.machine.totalRam}"></div>
                                <div class = "second" th:text = "${info.machine.ramTypeOrOSBitDepth}"></div>
                                <div id = "currentProcCount" class = "third" th:text = "${info.machine.procCount}"></div>
                            </div>
                            <div class = "dividers">
                                <div class = "first"></div>
                                <div class = "second"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4">
                    <div class = "card">
                        <div class = "header">
                            <div class = "hw-logo third">
                                <img class = "hardware-icon" th:src = "@{/img/icons/disk.png}" />
                            </div>
                            <div class = "label-hw-info">
                                <div class = "hw-type">Storage</div>
                             <div class = "hw-name" th:text = "${info.storage.mainStorage}"></div>
                            </div>
                        </div>
                        <div class = "usage">
                            <div class = "main-hw-info">
                                <div class = "hw-usage">
                                    <div class = "usage-value">
                                        <span id = "storage-hundreds" class = "first">0</span>
                                        <span id = "storage-tens" class = "second">0</span>
                                        <span id = "storage-ones" class = "third">0</span>
                                    </div>
                                    <div class = "usage-postfix">%</div>
                                </div>
                                <div class = "info-label">STORAGE USAGE</div>
                                <div class = "usage-underline third"></div>
                            </div>
                        </div>
                        <div class = "footer third">
                            <div class = "detailed-hw-info">
                                <div id = "currentTotalStorage" class = "first" th:text = "${info.storage.total}"></div>
                                <div id = "currentDiskCount" class = "second" th:text = "${info.storage.diskCount}"></div>
                                <div class = "third" th:text = "${info.storage.swapAmount}"></div>
                            </div>
                            <div class = "dividers">
                                <div class = "first"></div>
                                <div class = "second"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <script type = "text/javascript" th:inline = "javascript"> labelsInitialization(); </script>
                <div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4 sm-hidden">
                    <div class = "card">
                        <div class = "logo">WARD</div>
                        <div class = "logo-description">SERVER DASHBOARD</div>
                        <div class = "clouds">
                            <img id = "cloud-left" class = "first" th:src = @{/img/logo/clouds/left.png} />
                            <img id = "cloud-right" class = "second" th:src = @{/img/logo/clouds/right.png} />
                        </div>
                        <img class = "background" th:src = @{/img/logo/background.png} />
                        <div class = "uptime">
                            <div class = "uptime-rectangle-grid">
                                <div class = "values-grid">
                                    <div><p id = "uptime-days" th:text = "${uptime.days}"></p></div>
                                    <div><p id = "uptime-hours" th:text = "${uptime.hours}"></p></div>
                                    <div><p id = "uptime-minutes" th:text = "${uptime.minutes}"></p></div>
                                    <div><p id = "uptime-seconds" th:text = "${uptime.seconds}"></p></div>
                                </div>
                                <div class = "labels-grid">
                                    <div>DAYS</div>
                                    <div>HOURS</div>
                                    <div>MINUTES</div>
                                    <div>SECONDS</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class = "col-lg-12 col-xl-8 sm-hidden">
                    <div class = "card">
                        <div class = "chart-label">Hardware Utilization (%)</div>
                        <div class = "chart-triangle-grid">
                            <div id = "processor-triangle" class = "first"></div>
                            <div id = "ram-triangle" class = "second"></div>
                            <div id = "storage-triangle" class = "third"></div>
                        </div>
                        <div class = "chart-rectangle-grid">
                            <div id = "processor-rectangle" class = "first"></div>
                            <div id = "ram-rectangle" class = "second"></div>
                            <div id = "storage-rectangle" class = "third"></div>
                        </div>
                        <div class = "chart-container">
                            <canvas id = "chart-body"></canvas>
                        </div>
                        <script type = "text/javascript" th:inline = "javascript"> chartInitialization(); </script>
                    </div>
                    <div id = "project-version" class = "text-center" th:text = "${version}"></div>
                </div>
            </div>
        </div>
        <script type = "text/javascript" th:inline = "javascript"> indexInitialization(); </script>
    </body>
</html>