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

<polymer-element name="flag-list" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <nav-menu link="{{ makeLink('/flags') }}" anchor="flags" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content-centered">
      <template if="{{ modifiedFlags.isNotEmpty }}">
        <h1>Modified Flags</h1>
        <br>
        <template repeat="{{ flag in modifiedFlags }}">
          <flag-item flag="{{ flag }}"></flag-item>
          <br>
        </template>
        <hr>
      </template>

      <h1>Unmodified Flags</h1>
      <br>
      <template if="{{ unmodifiedFlags.isEmpty }}">
        <em>None</em>
      </template>
      <template if="{{ unmodifiedFlags.isNotEmpty }}">
        <template repeat="{{ flag in unmodifiedFlags }}">
          <flag-item flag="{{ flag }}"></flag-item>
          <br>
        </template>
      </template>
    </div>
    <view-footer></view-footer>
  </template>
</polymer-element>

<polymer-element name="flag-item" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <span style="color:#aaa">// {{ flag['comment'] }}</span>
    <div style="padding: 3px 0">
      <b>{{ flag['name'] }}</b>
      &nbsp;=&nbsp;
      {{ flag['valueAsString'] }}
    </div>
  </template>
</polymer-element>

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