<div id="network">
{% if network_usage %}
  {% for iface in network_usage.interfaces %}
    {{ iface.interface }}:
    ↓ {{ (iface.rx_bps / 1024) | round(1) }} KB/s
    ↑ {{ (iface.tx_bps / 1024) | round(1) }} KB/s<br>
  {% endfor %}
{% else %}
  —
{% endif %}
</div>
<script>
  window.BussDCC.on("ui.system.network.usage.updated", (payload) => {
    const d = document.getElementById("network");
    let net = payload.data;

    let html = "";

    for (const iface of net.interfaces) {
      const rx = (iface.rx_bps / 1024).toFixed(1);
      const tx = (iface.tx_bps / 1024).toFixed(1);

      html += `${iface.interface}: ↓ ${rx} KB/s ↑ ${tx} KB/s<br>`;
    }

    d.innerHTML = html || "—";
  });
</script>
