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

<polymer-element name="vm-view">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ false }}"></top-nav-menu>
      <vm-nav-menu vm="{{ vm }}" last="{{ true }}"></vm-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-notify notifications="{{ app.notifications }}"></nav-notify>
    </nav-bar>

    <div class="content-centered">
      <h1>VM</h1>
      <hr>
      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">name</div>
          <div class="memberValue">{{ vm.name }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">address</div>
          <div class="memberValue">{{ vm.target.networkAddress }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">version</div>
          <div class="memberValue">{{ vm.version }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">started at</div>
          <div class="memberValue">{{ vm.startTime.toString() }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">uptime</div>
          <div class="memberValue">{{ vm.upTime.toString() }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">refreshed at</div>
          <div class="memberValue">{{ vm.refreshTime.toString() }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">pid</div>
          <div class="memberValue">{{ vm.pid }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">peak memory</div>
          <div class="memberValue">{{ vm.maxRSS }}</div>
        </div>
        <br>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">flags</a>
          </div>
          <div class="memberValue">
            View <a on-click="{{ goto }}" _href="{{ gotoLink('/timeline') }}">timeline</a>
          </div>
        </div>
      </div>
      <br>
      <br>
      <h1>Isolates ({{ vm.isolates.length }})</h1>
      <hr>
      <ul class="list-group">
        <template repeat="{{ isolate in vm.isolates }}">
          <li class="list-group-item">
            <isolate-summary isolate="{{ isolate }}"></isolate-summary>
          </li>
          <hr>
        </template>
      </ul>
    </div>
    <view-footer></view-footer>
  </template>
</polymer-element>

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