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

<polymer-element name="persistent-handles-page" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
    .table {
      border-collapse: collapse!important;
      margin-bottom: 20px
      table-layout: fixed;
      width: 100%;
    }
    .table td:nth-of-type(1) {
      width: 30%;
    }
    .th, .td {
      padding: 8px;
      vertical-align: top;
    }
    .table thead > tr > th {
      vertical-align: bottom;
      text-align: left;
      border-bottom:2px solid #ddd;
    }
    .spacer {
      width: 16px;
    }
    .left-border-spacer {
      width: 16px;
      border-left: 1px solid;
    }
    .clickable {
      color: #0489c3;
      text-decoration: none;
      cursor: pointer;
    }
    .clickable:hover {
      text-decoration: underline;
      cursor: pointer;
    }
    #weakPersistentHandlesTable tr:hover > td {
      background-color: #F4C7C3;
    }
    .nav-option {
      color: white;
      float: right;
      margin: 3px;
      padding: 8px;
    }
    </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('/persistent-handles', isolate) }}" anchor="persistent handles" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>
    <div class="content-centered-big">
      <template if="{{ persistentHandles.isEmpty }}">
        <h1>Persistent Handles (0)</h1>
        <hr>
      </template>
      <template if="{{ persistentHandles.isNotEmpty }}">
        <h1>Persistent Handles ({{ persistentHandles.length }})</h1>
        <hr>
        <curly-block expand="{{ persistentHandles.length <= 8 }}">
          <div class="memberList">
            <template repeat="{{ persistentHandle in persistentHandles }}">
              <div class="memberItem">
                <div class="memberValue">
                  <any-service-ref ref="{{ persistentHandle['object'] }}">
                  </any-service-ref>
                </div>
              </div>
            </template>
          </div>
        </curly-block><br><br>
      </template>
      <br><br>
      <template if="{{ weakPersistentHandles.isEmpty }}">
        <h1>Weak Persistent Handles (0)</h1>
        <hr>
      </template>
      <template if="{{ weakPersistentHandles.isNotEmpty }}">
        <h1>Weak Persistent Handles ({{ weakPersistentHandles.length }})</h1>
        <hr>
      </template>
      <table id="weakPersistentHandlesTable" class="flex-item-100-percent table">
        <thead id="weakPersistentHandlesTableHead">
          <tr>
            <th on-click="{{changeSort}}" class="clickable" title="External Size">{{ weakPersistentHandlesTable.getColumnLabel(0) }}</th>
            <th on-click="{{changeSort}}" class="clickable" title="Peer">{{ weakPersistentHandlesTable.getColumnLabel(1) }}</th>
            <th on-click="{{changeSort}}" class="clickable" title="Finalizer Callback">{{ weakPersistentHandlesTable.getColumnLabel(2) }}</th>
            <th class="spacer"></th>
            <th on-click="{{changeSort}}" class="clickable" title="Object">{{ weakPersistentHandlesTable.getColumnLabel(4) }}</th>
          </tr>
        </thead>
        <tbody id="weakPersistentHandlesTableBody">
        </tbody>
      </table>
      <view-footer></view-footer>
    </div>
  </template>
</polymer-element>