<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">

<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>
      <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
      </isolate-nav-menu>
      <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

    <div class="content">
      <h1>isolate '{{ isolate.name }}'</h1>
    </div>

    <br>
    <div class="flex-row">
      <div class="flex-item-10-percent">
      </div>
      <div class="flex-item-30-percent">
        <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
      </div>
      <div class="flex-item-50-percent">
        <isolate-location isolate="{{ isolate }}"></isolate-location>
      </div>
      <div class="flex-item-10-percent">
      </div>
    </div>
    <br>

    <template if="{{ isolate.topFrame != null }}">
      <br>
      <script-inset script="{{ isolate.topFrame['script'] }}"
                    currentPos="{{ isolate.topFrame['tokenPos'] }}"
                    height="200px">
      </script-inset>
    </template>

    <div class="flex-row">
      <div class="flex-item-20-percent"></div>
      <div class="flex-item-60-percent"><hr></div>
      <div class="flex-item-20-percent"></div>
    </div>

    <br>

    <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>

    <div class="flex-row">
      <div class="flex-item-20-percent"></div>
      <div class="flex-item-60-percent"><hr></div>
      <div class="flex-item-20-percent"></div>
    </div>

    <div class="content-centered">
      <div class="flex-row">
        <div class="flex-item-50-percent">
          <div class="memberList">
            <div class="memberItem">
              <div class="memberName">root library</div>
              <div class="memberValue">
                <library-ref ref="{{ isolate.rootLib }}"></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.mainPort }}</div>
            </div>
          </div>
        </div>
        <div class="flex-item-50-percent">
          <div class="memberItem">
            <div class="memberValue">
              See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('debug/breakpoints')) }}">breakpoints</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <hr>

    <div class="content">
      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>

    <hr>

    <div class="content">
      <div id="tagProfileChart" class="miniProfileChart" style="height: 600px"></div>
    </div>

    <hr>

    <div class="content">
      <eval-box callback="{{ eval }}"></eval-box>
    </div>
    <br><br><br><br>
    <br><br><br><br>
  </template>
</polymer-element>

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