<div class="row row-cards">
  <div class="col-12">
    <div class="card">
      <div class="card-header"><h3 class="card-title">Details: {{ method }} {{ endpoint }}</h3></div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-vcenter">
            <thead>
              <tr>
                <th>When (epoch)</th>
                <th class="text-end">Δ Bytes</th>
                <th class="text-end">Duration (s)</th>
                <th>Top Growing Types</th>
              </tr>
            </thead>
            <tbody>
            {% for s in stats.recent %}
              <tr>
                <td class="mono">{{ s.ts | int }}</td>
                <td class="text-end mono"><span class="{{ 'delta-pos' if s.delta_bytes>0 else 'delta-neg' }}">{{ s.delta_bytes }}</span></td>
                <td class="text-end">{{ '%.3f'|format(s.duration_s) }}</td>
                <td>
                  {% if s.top_types %}
                    <details>
                      <summary>Show top types</summary>
                      <ul class="mt-2">
                        {% for t in s.top_types %}
                          <li class="mono">{{ t.type }} — +{{ t.size_delta }} B ({{ t.count_delta }} objs, avg {{ t.avg_size }} B)</li>
                        {% endfor %}
                      </ul>
                    </details>
                  {% else %}
                    <span class="text-secondary">n/a</span>
                  {% endif %}
                </td>
              </tr>
            {% else %}
              <tr><td colspan="4" class="text-secondary">No recent samples.</td></tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>