<div class="row row-cards">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Current Heap Summary</h3>
        <div class="card-actions">
          <form method="get" class="d-flex">
            <div class="input-group">
              <span class="input-group-text">Limit</span>
              <input class="form-control" type="number" name="limit" min="1" max="500" value="{{ request.query_params.get('limit', 50) }}">
              <button class="btn btn-primary" type="submit">Refresh</button>
            </div>
          </form>
        </div>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-vcenter">
            <thead>
              <tr>
                <th>Type</th>
                <th class="text-end">Count</th>
                <th class="text-end">Total Size (B)</th>
                <th class="text-end">Avg Size (B)</th>
              </tr>
            </thead>
            <tbody>
              {% for r in rows %}
              <tr>
                <td class="mono">{{ r.type }}</td>
                <td class="text-end">{{ r.count }}</td>
                <td class="text-end mono">{{ r.size }}</td>
                <td class="text-end">{{ r.avg }}</td>
              </tr>
              {% else %}
              <tr><td colspan="4" class="text-secondary">No data.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>