<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Stats</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
    <h1>System Statistics Data</h1>
    <div id="stats" style="display:flex;flex-direction:column;gap:10px">
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-clock"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">Current Time:</span>
            </div>
            <span id="current-time"></span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-hourglass-split"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">System Uptime:</span>
            </div>
            <span id="system-uptime"></span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-pci-card-network"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">IP Address:</span>
            </div>
            <span id="ip-address" style="display:block;text-align:right"></span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-cpu"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">CPU Usage:</span>
            </div>
            <span id="cpu-usage"></span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-thermometer-half"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">SoC Temperature:</span>
            </div>
            <span id="soc-temp"></span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-memory"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">RAM:</span>
            </div>
            <span><span id="used-ram"></span>/<span id="total-ram"></span></span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-nvme"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">Swap:</span>
            </div>
            <span><span id="used-swap"></span>/<span id="total-swap"></span></span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-hdd"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">Disk Usage:</span>
            </div>
            <span id="disk-usage"></span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-device-hdd"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">Disk Space:</span>
            </div>
            <span><span id="disk-used"></span>/<span id="disk-total"></span> (<span id="disk-available"></span> free)</span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-motherboard"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">System Model:</span>
            </div>
            <span id="system-model"></span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-gear"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">Kernel:</span>
            </div>
            <span id="kernel-version"></span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <div>
                <i class="bi bi-ubuntu"></i>
                <span style="margin-left:10px;color:black;font-weight:normal">Operating System:</span>
            </div>
            <span id="os-version"></span>
        </div>
    </div>
    <button id="shutdown-btn">Shutdown System</button>
    <button id="reboot-btn">Reboot System</button>
    <button id="update-btn">Update System</button>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    <hr>
    <footer>
        <p class="footer-text">Made with &#x2764;&#xFE0F by <a href="https://github.com/QinCai-rui" target="_blank">@QinCai-rui</a></p>
        <p class="footer-text">Follow me on 
            <a href="https://github.com/QinCai-rui" target="_blank">GitHub</a>, 
            <a href="https://hackclub.slack.com/archives/D07BNRCH88P" target="_blank">Hack Club Slack (@QinCai)</a>, and
            <a href="https://qincai.xyz" target="_blank">my website!</a>
        </p>
        <p class="footer-text">Commit ID: <code>{{ commit_id }}</code></p>
        <p class="footer-text">Commit Time: <code>{{ commit_time }}</code></p>
    </footer>
</body>
</html>
