<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="action_link.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_inset.html">
<link rel="import" href="script_ref.html">
<link rel="import" href="view_footer.html">

<polymer-element name="isolate-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      .sourceInset {
        padding-left: 15%;
        padding-right: 15%;
      }
      .miniProfileChart {
        width: 80%;
      }
    </style>

    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
      <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}"></isolate-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content-centered">
      <h1>isolate '{{ isolate.name }}'</h1>
      <br>
      <div class="flex-row">
        <div style="flex:1"></div>
        <div>
          <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
          <isolate-location isolate="{{ isolate }}"></isolate-location>
          [<a on-click="{{ goto }}" _href="{{ gotoLink('/debugger', isolate) }}">debug</a>]
        </div>
      </div>
    </div>

    <template if="{{ isolate.topFrame != null }}">
      <br>
      <div class="content-centered">
        <source-inset location="{{ isolate.topFrame.function.location }}"
                      currentPos="{{ isolate.topFrame.location.tokenPos }}"
                      height="200px">
        </source-inset>
      </div>
    </template>

    <div class="content-centered">
      <hr>
      <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
    </div>

    <div class="content-centered">
      <hr>
      <div class="flex-row">
        <div class="flex-item-50-percent">
          <div class="memberList">
            <div class="memberItem">
              <div class="memberName">started at</div>
              <div class="memberValue">{{ isolate.startTime.toString() }}</div>
            </div>
            <div class="memberItem">
              <div class="memberName">uptime</div>
              <div class="memberValue">{{ isolate.upTime.toString() }}</div>
            </div>
            <div class="memberItem">
              <div class="memberName">root library</div>
              <div class="memberValue">
                <library-ref ref="{{ isolate.rootLibrary }}"></library-ref>
              </div>
            </div>
            <div class="memberItem">
              <template if="{{ isolate.entry != null }}">
                <div class="memberName">entry</div>
                <div class="memberValue">
                  <function-ref ref="{{ isolate.entry }}"></function-ref>
                </div>
              </template>
            </div>
            <div class="memberItem">
              <div class="memberName">isolate id</div>
              <div class="memberValue">{{ isolate.number }}</div>
            </div>
            <div class="memberItem">
              <div class="memberName">service protocol extensions</div>
              <div class="memberValue">{{ isolate.extensionRPCs }}</div>
            </div>

            <div class="memberItem">
              <div class="memberName">
                <action-link callback="{{ reloadSources }}"
                             label="reload sources">
                </action-link>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="content-centered">
      <hr>
      libraries ({{ isolate.libraries.length }})
      <curly-block expand="{{ isolate.libraries.length <= 8 }}">
        <div class="memberList">
          <template repeat="{{ lib in isolate.libraries }}">
            <div class="memberItem">
              <div class="memberName">
                <library-ref ref="{{ lib }}"></library-ref>
              </div>
            </div>
          </template>
        </div>
      </curly-block>
    </div>

    <div class="content-centered">
      <hr>
      <eval-box callback="{{ evaluate }}"></eval-box>
    </div>

    <div class="content-centered">
      <hr>
      <script-inset script="{{ rootLibrary.rootScript }}">
      </script-inset>
    </div>

    <view-footer></view-footer>
  </template>
</polymer-element>

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