<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="curly_block.html">
<link rel="import" href="function_ref.html">
<link rel="import" href="instance_ref.html">
<link rel="import" href="observatory_element.html">
<link rel="import" href="script_ref.html">

<polymer-element name="stack-frame" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <div class="flex-row">
      <div class="flex-item-fixed-1-12">
      </div>
      <div class="flex-item-fixed-1-12">
        #{{ frame['depth'] }}
      </div>
      <div class="flex-item-fixed-9-12">
        <function-ref ref="{{ frame['function'] }}"></function-ref>
          ( <script-ref ref="{{ frame['script'] }}"
                        pos="{{ frame['tokenPos'] }}">
          </script-ref> )

          <curly-block>
            <div class="memberList">
              <template repeat="{{ v in frame['vars'] }}">
                <div class="memberItem">
                  <div class="memberName">{{ v['name']}}</div>
                  <div class="memberValue">
                    <instance-ref ref="{{ v['value'] }}"></instance-ref>
                  </div>
                </div>
              </template>
            </div>
          </curly-block>
      </div>
      <div class="flex-item-fixed-1-12">
      </div>
    </div>
  </template>
</polymer-element>

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