<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="class_ref.html">
<link rel="import" href="field_ref.html">
<link rel="import" href="function_ref.html">
<link rel="import" href="instance_ref.html">
<link rel="import" href="object_common.html">
<link rel="import" href="context_ref.html">

<polymer-element name="context-view">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <vm-nav-menu vm="{{ context.isolate.vm }}"></vm-nav-menu>
      <isolate-nav-menu isolate="{{ context.isolate }}"></isolate-nav-menu>
      <!-- TODO(turnidge): Add library nav menu here. -->
      <class-nav-menu cls="{{ context.clazz }}"></class-nav-menu>
      <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-notify notifications="{{ app.notifications }}"></nav-notify>
    </nav-bar>

    <template if="{{ !context.isError }}">
      <div class="content">
        <h1>instance of Context</h1>

        <object-common object="{{ context }}"></object-common>
        <br>

        <div class="memberList">
          <template if="{{ context.parentContext != null }}">
            <div class="memberItem">
              <div class="memberName">parent context</div>
              <div class="memberValue">
                <any-service-ref ref="{{ context.parentContext }}"></any-service-ref>
              </div>
            </div>
          </template>
        </div>
      </div>

      <hr>

      <div class="content">
        <template if="{{ context.variables.isNotEmpty }}">
          variables ({{ context.variables.length }})
          <curly-block expand="{{ context.variables.length <= 8 }}">
            <div class="memberList">
              <template repeat="{{ index in context.variables.asMap().keys }}">
                <div class="memberItem">
                  <div class="memberName">[{{ index }}]</div>
                  <div class="memberValue">
                    <any-service-ref
                       ref="{{ context.variables[index]['value'] }}">
                    </any-service-ref>
                  </div>
                </div>
              </template>
            </div>
          </curly-block><br><br>
        </template>
      </div>
    </template>
    <view-footer></view-footer>
  </template>
</polymer-element>

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