<head>
  <link rel="import" href="nav_bar.html">
  <link rel="import" href="observatory_element.html">
  <link rel="import" href="stack_frame.html">
</head>

<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="{{ flagList.vm.relativeLink('flags') }}" anchor="flags" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

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

      <h1>Unmodified Flags</h1>
      <br>
      <template if="{{ flagList['unmodifiedFlags'].isEmpty }}">
        <em>None</em>
      </template>
      <template if="{{ flagList['unmodifiedFlags'].isNotEmpty }}">
        <template repeat="{{ flag in flagList['unmodifiedFlags'] }}">
          <flag-item flag="{{ flag }}"></flag-item>
          <br>
        </template>
      </template>
    </div>

  </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>