<head>
  <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="library_ref.html">
  <link rel="import" href="observatory_element.html">
  <link rel="import" href="script_ref.html">
</head>
<polymer-element name="library-view" extends="observatory-element">
  <template>
  <div class="alert alert-success">Library {{ library['name'] }}</div>
  <div class="alert alert-info">Scripts</div>
  <table class="table table-hover">
    <tbody>
      <tr template repeat="{{ script in library['scripts']}}">
        <td>
          {{ script['kind'] }}
        </td>
        <td>
          <script-ref app="{{ app }}" ref="{{ script }}"></script-ref>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="alert alert-info">Imported Libraries</div>
  <table class="table table-hover">
    <tbody>
      <tr template repeat="{{ lib in library['libraries'] }}">
        <td>
          <library-ref app="{{ app }}" ref="{{ lib }}"></library-ref>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="alert alert-info">Variables</div>
  <table class="table table-hover">
    <tbody>
      <tr template repeat="{{ variable in library['variables'] }}">
        <td><field-ref app="{{ app }}" ref="{{ variable }}"></field-ref></td>
        <td><instance-ref app="{{ app }}" ref="{{ variable['value'] }}"></instance-ref></td>
      </tr>
    </tbody>
  </table>
  <div class="alert alert-info">Functions</div>
  <table class="table table-hover">
    <tbody>
      <tr template repeat="{{ func in library['functions'] }}">
        <td>
          <function-ref app="{{ app }}" ref="{{ func }}"></function-ref>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="alert alert-info">Classes</div>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Internal Name</th>
      </tr>
    </thead>
    <tbody>
      <tr template repeat="{{ cls in library['classes'] }}">
        <td>
          <class-ref app="{{ app }}" ref="{{ cls }}"></class-ref>
        </td>
        <td>
          <class-ref app="{{ app }}" ref="{{ cls }}" internal></class-ref>
        </td>
      </tr>
    </tbody>
  </table>

  </template>
  <script type="application/dart" src="library_view.dart"></script>
</polymer-element>