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

<link rel="import" href="service_ref.html">

<polymer-element name="library-ref">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      .indented {
      margin-left: 1.5em;
      font: 400 14px 'Montserrat', sans-serif;
      line-height: 150%;
      }
    </style>
    <template if="{{ nameIsEmpty }}">
      <a on-click="{{ goto }}" _href="{{ url }}">unnamed</a>
    </template>
    <template if="{{ !nameIsEmpty }}">
      <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
    </template>
    <template if="{{ asValue }}">
      <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
        <div class="indented">
          <template repeat="{{ field in ref.variables }}">
            <template if="{{ field.isStatic }}">
              {{ field.name }}&nbsp;:&nbsp;
              <any-service-ref ref="{{ field.staticValue }}"
                               expandKey="{{ makeExpandKey(field.name) }}">
              </any-service-ref><br>
            </template>
          </template>
        </div>
      </curly-block>
    </template>
  </template>
</polymer-element>

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