{% macro fmt_bytes(b) %}
  {%- if b < 1048576 %}{{ "%.1f"|format(b/1024) }} KB
  {%- elif b < 1073741824 %}{{ "%.1f"|format(b/1048576) }} MB
  {%- else %}{{ "%.2f"|format(b/1073741824) }} GB
  {%- endif %}
{%- endmacro %}

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem">
{% for iface in interfaces %}
  {% if iface.name not in ['lo'] %}
  <article style="margin:0;padding:1rem">
    <strong>{{ iface.name }}</strong>
    <table style="margin:0.5rem 0;font-size:0.85rem">
      <tr><td style="color:var(--pico-muted-color)">RX</td><td><strong>{{ fmt_bytes(iface.rx_bytes) }}</strong></td><td style="color:var(--pico-muted-color)">{{ "{:,}".format(iface.rx_packets) }} pkt</td></tr>
      <tr><td style="color:var(--pico-muted-color)">TX</td><td><strong>{{ fmt_bytes(iface.tx_bytes) }}</strong></td><td style="color:var(--pico-muted-color)">{{ "{:,}".format(iface.tx_packets) }} pkt</td></tr>
      {% if iface.rx_drops > 0 or iface.tx_drops > 0 %}
      <tr><td colspan="3" style="color:#fca5a5;font-size:0.75rem">&#9888; {{ iface.rx_drops + iface.tx_drops }} drops</td></tr>
      {% endif %}
    </table>
  </article>
  {% endif %}
{% endfor %}
</div>