<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="curly_block.html">
<link rel="import" href="eval_box.html">
<link rel="import" href="function_ref.html">
<link rel="import" href="isolate_summary.html">
<link rel="import" href="library_ref.html">
<link rel="import" href="nav_bar.html">
<link rel="import" href="observatory_element.html">
<link rel="import" href="script_ref.html">
<link rel="import" href="view_footer.html">

<polymer-element name="vm-view" extends="observatory-element">
  <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-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>
        <br>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">flags</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>