<head>
  <link rel="import" href="class_ref.html">
  <link rel="import" href="observatory_element.html">
</head>
<polymer-element name="heap-profile" extends="observatory-element">
<template>
  <div>
  <button type="button" on-click="{{refreshData}}">Refresh</button>
  </div>
  <div>
  <span>New Space </span>
  <span>{{ status(true) }}</span>
  </div>
  <div>
  <span>Old Space </span>
  <span>{{ status(false) }}</span>
  </div>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Class</th>
        <th><button on-click="{{changeSortColumn}}" data-msg="1">Current (new)</button></th>
        <th><button on-click="{{changeSortColumn}}" data-msg="2">Allocated since GC (new)</button></th>
        <th><button on-click="{{changeSortColumn}}" data-msg="3">Total before last GC (new)</button></th>
        <th><button on-click="{{changeSortColumn}}" data-msg="4">Total after last GC (new)</button></th>
        <th><button on-click="{{changeSortColumn}}" data-msg="5">Current (old)</button></th>
        <th><button on-click="{{changeSortColumn}}" data-msg="6">Allocated since GC (old)</button></th>
        <th><button on-click="{{changeSortColumn}}" data-msg="7">Total before last GC (old)</button></th>
        <th><button on-click="{{changeSortColumn}}" data-msg="8">Total after last GC (old)</button></th>
      </tr>
    </thead>
    <tbody>
    <tr template repeat="{{ cls in sortedProfile }}">
      <td><class-ref app="{{ app }}" ref="{{ cls['class'] }}"></class-ref></td>
      <td>{{ current(cls, true) }}</td>
      <td>{{ allocated(cls, true) }}</td>
      <td>{{ beforeGC(cls, true) }}</td>
      <td>{{ afterGC(cls, true) }}</td>
      <td>{{ current(cls, false) }}</td>
      <td>{{ allocated(cls, false) }}</td>
      <td>{{ beforeGC(cls, false) }}</td>
      <td>{{ afterGC(cls, false) }}</td>
    </tr>
    </tbody>
  </table>
</template>
<script type="application/dart" src="heap_profile.dart"></script>
</polymer-element>