{% extends "base.html" %}
{% block content %}

<div class="card mt-5">
    <div class="card-header">
        Spothole
    </div>
    <div class="card-body">
        <div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
            <div class="col"><strong>Metadata</strong></div>
            <div class="col">Software Version: <span id="software-version"></span></div>
            <div class="col">Owner Callsign: <span id="server-owner-callsign"></span></div>
            <div class="col">Up since: <span id="up-since"></span></div>
        </div>
        <div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
            <div class="col"><strong>Performance</strong></div>
            <div class="col">Memory Use: <span id="memory-use"></span></div>
            <div class="col">Total Spots: <span id="total-spots"></span></div>
            <div class="col">Total Alerts: <span id="total-alerts"></span></div>
        </div>
        <div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
            <div class="col"><strong>Web Server</strong></div>
            <div class="col">Status: <span id="web-server-status"></span></div>
            <div class="col">Last API call: <span id="web-server-last-api"></span></div>
            <div class="col">Last page req: <span id="web-server-last-page"></span></div>
        </div>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header">
        Spot Providers
    </div>
    <div class="card-body" id="spot-providers-status-container">

    </div>
</div>

<div class="card mt-3">
    <div class="card-header">
        Alert Providers
    </div>
    <div class="card-body" id="alert-providers-status-container">

    </div>
</div>

<div class="card mt-3">
    <div class="card-header">
        Solar/Band Conditions Providers
    </div>
    <div class="card-body" id="condition-providers-status-container">

    </div>
</div>

<div class="card mt-3">
    <div class="card-header">
        SIG Reference Data Providers
    </div>
    <div class="card-body" id="sig-ref-data-providers-status-container">

    </div>
</div>

<script src="/static/js/status.js?v=1785434213"></script>
<script>
    $(document).ready(function () {
        $("#nav-link-status").addClass("active");
    }); <!-- highlight active page in nav -->
</script>

{% end %}