{% macro context_help(title, disclosure_key=none) -%}
<details class="context-help"{% if disclosure_key %} data-topology-disclosure-key="{{ disclosure_key }}"{% endif %}>
  <summary>{{ title }}</summary>
  <div class="context-help-body">{{ caller() }}</div>
</details>
{%- endmacro %}

{% macro metric_identity(metric) -%}
<span class="metric-identity"><strong>{{ metric.label }}</strong></span>
{%- endmacro %}

{% macro metric_value(metric) -%}
<span class="metric-value metric-reading">{% if metric.presentation_kind == 'status' %}<span class="status-badge status-{{ metric.status_tone }}">{{ metric.display_value }}</span>{% else %}<strong>{{ metric.display_value }}</strong>{% endif %}<small class="metric-age">Collected {% if metric.captured_at %}<time datetime="{{ metric.captured_at }}" data-monitoring-time>{{ metric.display_captured_at }}</time>{% else %}Not available{% endif %} · {{ metric.quality|capitalize if metric.quality else 'Unknown quality' }}</small></span>
{%- endmacro %}

{% macro normalized_widget(widget, heading_id=none, disclosure_key_prefix=none, complete=false) -%}
{% if widget.kind == "interface_cumulative_totals" %}
<section class="normalized-widget router-traffic-widget"{% if heading_id %} aria-labelledby="{{ heading_id }}"{% else %} aria-label="{{ widget.title }}"{% endif %}>
  <div class="widget-heading">
    <div><p class="eyebrow">Normalized interface telemetry</p><h4{% if heading_id %} id="{{ heading_id }}"{% endif %}>{{ widget.title }}</h4></div>
    <span class="status-badge status-success">Cumulative totals</span>
  </div>
  <p class="field-help">Byte totals are cumulative counters captured from each interface. A single capture shows a reset-bounded total, not change over time.</p>
  <div class="widget-stat-grid" aria-label="Router Traffic summary">
    <div><strong>{{ widget.observed_interface_count }}</strong><span>Observed interfaces</span></div>
    <div><strong>{{ widget.nonzero_total_count }}</strong><span>Non-zero total pairs</span></div>
    <div><strong>{{ widget.zero_total_count }}</strong><span>All-zero total pairs</span></div>
    {% if widget.partial_pair_count %}<div><strong>{{ widget.partial_pair_count }}</strong><span>Incomplete RX/TX pairs</span></div>{% endif %}
  </div>
  {% if widget.top_rows %}
  <p class="metadata"><strong>Top interfaces by combined cumulative bytes</strong></p>
  <ul class="metric-list widget-preview-list">
    {% for row in widget.top_rows %}
    <li><span class="metric-identity"><strong>{{ row.interface }}</strong><small class="metric-context">RX {{ row.rx_display }} · TX {{ row.tx_display }}</small></span><span class="metric-value">{{ row.combined_display }}<small class="metric-age">Combined cumulative total</small></span></li>
    {% endfor %}
  </ul>
  {% endif %}
  {% if not complete %}<details class="data-disclosure"{% if disclosure_key_prefix %} data-topology-disclosure-key="widget-interface-counters|{{ disclosure_key_prefix }}"{% endif %}>
    <summary>View complete interface counter details</summary>{% endif %}
    <div class="table-container interface-table-container">
      <table class="interface-counter-table">
        <thead><tr><th scope="col">Interface</th><th scope="col">State</th><th scope="col">RX</th><th scope="col">TX</th><th scope="col">Combined</th><th class="interface-secondary" scope="col">Captured</th><th class="interface-technical" scope="col">Quality</th><th class="interface-technical" scope="col">Source check</th></tr></thead>
        <tbody>
          {% for row in widget.rows %}
          <tr><th scope="row">{{ row.interface }}</th><td data-label="State">{{ row.operational_state or 'Not collected' }}</td><td data-label="RX">{{ row.rx_display }}</td><td data-label="TX">{{ row.tx_display }}</td><td data-label="Combined">{{ row.combined_display }}</td><td class="interface-secondary" data-label="Captured">{% if row.captured_at %}<time datetime="{{ row.captured_at }}" data-monitoring-time>{{ row.display_captured_at }}</time>{% else %}Not available{% endif %}</td><td class="interface-technical" data-label="Quality">{{ row.quality|capitalize }}</td><td class="identifier interface-technical" data-label="Source check">{{ row.source_check_ids|join(', ') if row.source_check_ids else 'Not available' }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% if not complete %}</details>{% endif %}
  {% call context_help("Why NEXXVU watches interface counters", 'widget-context-help|' ~ disclosure_key_prefix if disclosure_key_prefix else none) %}
  <p>Interface byte counters help operators compare cumulative receive and transmit volume and identify interfaces worth investigating. A genuine zero remains a valid observed value; missing telemetry is shown as not collected and is never replaced with zero.</p>
  {% endcall %}
</section>
{% elif widget.kind == "normalized_metric_list" %}
<section class="normalized-widget" aria-label="{{ widget.title }}">
  <p class="metadata"><strong>{{ widget.title }}</strong></p>
  <ul class="metric-list widget-preview-list">
    {% for metric in widget.preview %}<li>{{ metric_identity(metric) }}{{ metric_value(metric) }}</li>{% endfor %}
  </ul>
  <details class="data-disclosure">
    <summary>Technical telemetry details</summary>
    <ul class="metric-list complete-metric-list">
      {% for metric in widget["items"] %}<li><span class="metric-identity"><strong>{{ metric.label }}</strong><small class="metric-context identifier">{{ metric.metric_id }}{% if metric.dimensions %} · {% for key, value in metric.dimensions %}{{ key }}={{ value }}{% if not loop.last %}, {% endif %}{% endfor %}{% endif %}</small></span>{{ metric_value(metric) }}</li>{% endfor %}
    </ul>
  </details>
</section>
{% endif %}
{%- endmacro %}