<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="curly_block.html">
<link rel="import" href="observatory_element.html">
<link rel="import" href="service_ref.html">

<polymer-element name="context-ref" extends="service-ref">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <span>
      <a on-click="{{ goto }}" _href="{{ url }}"><em>Context</em> ({{ ref.length }})</a>
      <curly-block callback="{{ expander() }}">
        <div class="memberList">
          <div class="memberItem">
            <div class="memberName">parent</div>
            <div class="memberValue">
              <any-service-ref ref="{{ ref.parentContext }}"></any-service-ref>
            </div>
          </div>
          <template repeat="{{ variable in ref.variables }}">
            <div class="memberItem">
              <div class="memberName">[{{ variable['index']}}]</div>
              <div class="memberValue">
                <any-service-ref ref="{{ variable['value'] }}"></any-service-ref>
              </div>
            </div>
          </template>
        </div>
      </curly-block>
    </span>
  </template>
</polymer-element>

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