<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="nav_bar.html">
<link rel="import" href="observatory_element.html">
<link rel="import" href="class_ref.html">

<polymer-element name="class-tree" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      .table {
        border-spacing: 0px;
        width: 100%;
        margin-bottom: 20px
        vertical-align: middle;
      }

      tr {
        background-color: #FFFFFF;
      }

      tr:hover {
        background-color: #FAFAFA;
      }

      th {
        text-align: left;
      }
    </style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
      <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
      <nav-menu link="{{ makeLink('/class-tree', isolate) }}" anchor="class hierarchy" last="{{ true }}"></nav-menu>
    </nav-bar>
    <div class="content-centered">
      <h1>Class Hierarchy</h1>
      <table id="tableTree" class="table">
        <tbody id="tableTreeBody"></tbody>
      </table>
    </div>
  </template>
</polymer-element>

<script type="application/dart" src="class_tree.dart"></script>