<head>
  <link rel="import" href="function_ref.html">
  <link rel="import" href="observatory_element.html">
  <link rel="import" href="script_ref.html">
</head>
<polymer-element name="stack-trace" extends="observatory-element">
  <template>
  <div class="alert alert-info">Stack Trace</div>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Depth</th>
        <th>Function</th>
        <th>Script</th>
        <th>Line</th>
      </tr>
    </thead>
    <tbody>
      <tr template repeat="{{ frame in trace['members'] }}">
        <td></td>
        <td><function-ref app="{{ app }}" ref="{{ frame['function'] }}"></function-ref></td>
        <td><script-ref app="{{ app }}" ref="{{ frame['script'] }}"></script-ref></td>
        <td>{{ frame['line'] }}</td>
      </tr>
    </tbody>
  </table>
  </template>
  <script type="application/dart" src="stack_trace.dart"></script>
</polymer-element>