{% extends "base.html" %}

{% block css %}
    .container {
        max-width: 900px;
        margin: 0 auto;
    }

    #pause-button {
        white-space: nowrap;
        padding: 2px 8px;
        font-size: 0.85rem;
    }
{% endblock %}

{% block body %}
<div class="container">
    <form class="d-flex align-items-center justify-content-between mb-2">
        {% set options = {
                1: "Text Message",
                3: "Position",
                4: "Node Info",
                67: "Telemetry",
                71: "Neighbor Info",
                70: "Trace Route",
            }
        %}
        <button type="button" id="pause-button" class="btn btn-sm btn-outline-secondary">Pause</button>
    </form>

    <div class="row">
        <div class="col-xs" id="packet_list">
            {% for packet in packets %}
                {% include 'packet.html' %}
            {% else %}
                No packets found.
            {% endfor %}
        </div>
    </div>
</div>

<script>
let lastTime = null;
let portnum = "{{ portnum if portnum is not none else '' }}";
let updatesPaused = false;

// Use firehose_interval from config (seconds), default to 3s if not set
const firehoseInterval = {{ site_config["site"]["firehose_interval"] | default(3) }};
if (firehoseInterval < 0) firehoseInterval = 0;

function fetchUpdates() {
    if (updatesPaused || firehoseInterval === 0) return;

    const url = new URL("/firehose/updates", window.location.origin);
    if (lastTime) url.searchParams.set("last_time", lastTime);
    if (portnum) url.searchParams.set("portnum", portnum);

    fetch(url)
        .then(res => res.json())
        .then(data => {
            if (data.packets && data.packets.length > 0) {
                lastTime = data.last_time;
                const list = document.getElementById("packet_list");

                for (const html of data.packets.reverse()) {
                    list.insertAdjacentHTML("afterbegin", html);
                }
            }
        })
        .catch(err => {
            console.error("Update fetch failed:", err);
        });
}

document.addEventListener("DOMContentLoaded", () => {
    const pauseBtn = document.getElementById("pause-button");

    const portnumSelector = document.querySelector('select[name="portnum"]');
    if (portnumSelector) {
        portnumSelector.addEventListener("change", (e) => {
            const selected = e.target.value;
            const url = new URL(window.location.href);
            url.searchParams.set("portnum", selected);
            window.location.href = url;
        });
    }

    pauseBtn.addEventListener("click", () => {
        updatesPaused = !updatesPaused;
        pauseBtn.textContent = updatesPaused ? "Resume" : "Pause";
    });

    // Start fetching updates with configurable interval
    fetchUpdates();
    if (firehoseInterval > 0) {
        setInterval(fetchUpdates, firehoseInterval * 1000);
    }
});
</script>

{% endblock %}