{% url 'DPSupport:ping' as ping_url %}
<div class="widget-card" id="widget-ping">
    <div>
        <h3>Ping Test</h3>
        <p class="widget-desc">Measures latency from your browser to this server.</p>
    </div>
    <div class="ping-readout">
        <div class="ping-stat">
            <span class="value" id="ping-current">—</span>
            <span class="label">Current (ms)</span>
        </div>
        <div class="ping-stat">
            <span class="value" id="ping-min">—</span>
            <span class="label">Min (ms)</span>
        </div>
        <div class="ping-stat">
            <span class="value" id="ping-avg">—</span>
            <span class="label">Avg (ms)</span>
        </div>
        <div class="ping-stat">
            <span class="value" id="ping-max">—</span>
            <span class="label">Max (ms)</span>
        </div>
    </div>
    <div id="ping-status" style="font-size:0.85rem;color:#6b7a8d;">Press Start to begin.</div>
    <div>
        <button class="widget-btn" id="ping-btn" onclick="pingToggle()">Start</button>
    </div>
</div>

<script>
(function () {
    var pingUrl = "{{ ping_url }}";
    var running = false;
    var timer = null;
    var samples = [];

    function doProbe() {
        var t0 = performance.now();
        fetch(pingUrl, { cache: "no-store" })
            .then(function () {
                var rtt = Math.round(performance.now() - t0);
                samples.push(rtt);
                var min = Math.min.apply(null, samples);
                var max = Math.max.apply(null, samples);
                var avg = Math.round(samples.reduce(function(a,b){return a+b;},0) / samples.length);
                document.getElementById("ping-current").textContent = rtt;
                document.getElementById("ping-min").textContent = min;
                document.getElementById("ping-avg").textContent = avg;
                document.getElementById("ping-max").textContent = max;
                document.getElementById("ping-status").textContent =
                    "Sent " + samples.length + " probe" + (samples.length === 1 ? "" : "s") + ".";
            })
            .catch(function () {
                document.getElementById("ping-status").textContent = "Probe failed.";
            });
    }

    window.pingToggle = function () {
        var btn = document.getElementById("ping-btn");
        if (running) {
            running = false;
            clearInterval(timer);
            btn.textContent = "Start";
            document.getElementById("ping-status").textContent = "Stopped after " + samples.length + " probe" + (samples.length === 1 ? "" : "s") + ".";
        } else {
            running = true;
            samples = [];
            ["ping-current","ping-min","ping-avg","ping-max"].forEach(function(id){
                document.getElementById(id).textContent = "—";
            });
            btn.textContent = "Stop";
            doProbe();
            timer = setInterval(doProbe, 1000);
        }
    };
}());
</script>