<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
    <link rel="stylesheet" href="static/app.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/fontawesome.min.css" integrity="sha512-SgaqKKxJDQ/tAUAAXzvxZz33rmn7leYDYfBP+YoMRSENhf3zJyx3SBASt/OfeQwBHA1nxMis7mM3EV/oYT6Fdw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/solid.min.css" integrity="sha512-yDUXOUWwbHH4ggxueDnC5vJv4tmfySpVdIcN1LksGZi8W8EVZv4uKGrQc0pVf66zS7LDhFJM7Zdeow1sw1/8Jw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="shortcut icon" href="static/argus.png" type="image/png">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <script defer src="js/status.js"></script>
    <title>Argus Status</title>
</head>
<body class="d-flex flex-column">
    <header class="bg-dark text-light d-flex align-items-center p-2">
        <img class="logo" src="static/argus.png" alt="Argus">
        <h1 class="ms-2"><a class="refresh" href="/">Argus Status</a></h1>
        <div class="ms-auto" id="statusTime">{{time}}</div>
    </header>
    <main class="container p-2">
        <div id="errors" class="alert alert-danger d-none">
            {{errorMessage}}
        </div>
        <div id="status" class="d-none">
            <div class="row mb-4">
                <div class="col">
                    <div class="d-flex align-items-center p-2 shadow-sm rounded">
                        <div><img class="logo" src="static/argus.png" alt="Argus"></div>
                        <div class="display-6">
                            Argus
                            <div class="fs-6 fw-light mb-1" id="argusStatusIp">
                                {{ip}}
                            </div>
                            <div style="font-size: 10pt; width: 128px; " class="text-truncate" id="commitId">
                                {{commitId}}
                            </div>
                        </div>
                        <div class="ms-auto" id="argusStatusIcon"><i class="fa-solid fa-circle"></i></div>
                        <div class="ms-2" id="argusStatusField">{{status}}</div>
                    </div>
                </div>
            </div>
            <div class="row" id="scyllaNodes">
                {{scyllaNodes}}
            </div>
        </div>
        <div id="placeholder" class="text-center pt-4">
            <span class="spinner-grow"></span> Loading Status...
        </div>
    </main>
    <footer class="mt-auto bg-dark text-center text-light fw-light fs-6 p-4">
        ScyllaDB / Argus
    </footer>
</body>
</html>
