{% extends "base.html" %}

{% block title %}Status - Yaris OBD{% endblock %}

{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
    <h3 class="text-dark fw-bold m-0">Status</h3>
    <div class="d-flex flex-wrap align-items-center gap-2 justify-content-end">
        <button id="status-action-test-server" class="btn btn-outline-primary btn-sm" type="button">Test server now</button>
        <button id="status-action-sync-now" class="btn btn-outline-primary btn-sm" type="button">Sync now</button>
        <button id="status-action-reconnect-uplink" class="btn btn-outline-secondary btn-sm" type="button">Reconnect uplink</button>
        <button id="status-action-restart-app" class="btn btn-outline-danger btn-sm" type="button">Restart app service</button>
        <span id="status-updated" class="small text-muted">Loading…</span>
    </div>
</div>

<div id="status-error" class="alert alert-danger py-2" role="alert" hidden></div>
<div id="status-action-message" class="alert py-2" role="alert" hidden></div>

<div class="row g-3 mb-3">
    <div class="col-xl-4">
        <div class="card shadow-sm h-100">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <h6 class="text-primary fw-bold m-0">Remote server</h6>
                <span id="server-badge" class="badge text-bg-secondary">Checking…</span>
            </div>
            <div class="card-body">
                <div class="small text-muted text-uppercase fw-bold mb-1">Server URL</div>
                <div id="server-url" class="fw-semibold text-break mb-3">—</div>
                <div class="small text-muted text-uppercase fw-bold mb-1">Device</div>
                <div id="server-device" class="fw-semibold mb-3">—</div>
                <div class="small text-muted text-uppercase fw-bold mb-1">Health check</div>
                <div id="server-detail" class="fw-semibold mb-2">—</div>
                <div id="server-message" class="small text-muted">—</div>
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="card shadow-sm h-100">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <h6 class="text-primary fw-bold m-0">Wi-Fi / uplink</h6>
                <span id="uplink-badge" class="badge text-bg-secondary">Checking…</span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Mode</div>
                        <div id="uplink-mode" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Interface</div>
                        <div id="uplink-interface" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Connection</div>
                        <div id="uplink-connection" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">IP</div>
                        <div id="uplink-ip" class="fw-semibold">—</div>
                    </div>
                    <div class="col-12">
                        <div id="uplink-message" class="small text-muted">—</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="card shadow-sm h-100">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <h6 class="text-primary fw-bold m-0">Uploads</h6>
                <span id="upload-badge" class="badge text-bg-secondary">Checking…</span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Pending rows</div>
                        <div id="upload-pending" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Last path</div>
                        <div id="upload-path" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Trip sync</div>
                        <div id="upload-configured" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Dashcam upload</div>
                        <div id="upload-dashcam" class="fw-semibold">—</div>
                    </div>
                    <div class="col-12">
                        <div id="upload-message" class="small text-muted">—</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-xl-5">
        <div class="card shadow-sm h-100">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <h6 class="text-primary fw-bold m-0">Pi health</h6>
                <span id="health-badge" class="badge text-bg-secondary">Checking…</span>
            </div>
            <div class="card-body">
                <div id="health-warning" class="alert alert-warning py-2 mb-2" role="alert" hidden></div>
                <div id="health-error" class="alert alert-danger py-2 mb-2" role="alert" hidden></div>
                <div class="row g-3">
                    <div class="col-6 col-lg-3">
                        <div class="small text-muted text-uppercase fw-bold mb-1">CPU temp</div>
                        <div id="health-temperature" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6 col-lg-3">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Memory</div>
                        <div id="health-memory" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6 col-lg-3">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Disk</div>
                        <div id="health-disk" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6 col-lg-3">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Uptime</div>
                        <div id="health-uptime" class="fw-semibold">—</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="card shadow-sm h-100">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <h6 class="text-primary fw-bold m-0">GPS / cellular HAT</h6>
                <span id="gps-badge" class="badge text-bg-secondary">Checking…</span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">GPS fix</div>
                        <div id="gps-fix" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Fix age</div>
                        <div id="gps-age" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Latitude</div>
                        <div id="gps-latitude" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Longitude</div>
                        <div id="gps-longitude" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">SIM868 UART</div>
                        <div id="cellular-uart" class="fw-semibold">—</div>
                    </div>
                    <div class="col-6">
                        <div class="small text-muted text-uppercase fw-bold mb-1">Modem</div>
                        <div id="cellular-modem" class="fw-semibold">—</div>
                    </div>
                    <div class="col-12">
                        <div id="cellular-message" class="small text-muted">—</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3">
        <div class="card shadow-sm h-100">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <h6 class="text-primary fw-bold m-0">OBD</h6>
                <span id="obd-badge" class="badge text-bg-secondary">Checking…</span>
            </div>
            <div class="card-body">
                <div class="small text-muted text-uppercase fw-bold mb-1">Adapter</div>
                <div id="obd-adapter" class="fw-semibold mb-3">—</div>
                <div class="small text-muted text-uppercase fw-bold mb-1">Port</div>
                <div id="obd-port" class="fw-semibold mb-3">—</div>
                <div class="small text-muted text-uppercase fw-bold mb-1">Car link</div>
                <div id="obd-status" class="fw-semibold">—</div>
            </div>
        </div>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-header py-2">
        <h6 class="text-primary fw-bold m-0">Local services</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3">Service</th>
                        <th>Status</th>
                        <th>Sub-state</th>
                        <th>Enabled</th>
                        <th>Restarts</th>
                        <th class="pe-3">Result</th>
                    </tr>
                </thead>
                <tbody id="services-table">
                    <tr>
                        <td colspan="6" class="text-muted ps-3 py-3">Loading…</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/status.js') }}"></script>
{% endblock %}