<head>
  <link rel="import" href="nav_bar.html">
  <link rel="import" href="observatory_element.html">
</head>
<polymer-element name="breakpoint-list" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <isolate-nav-menu isolate="{{ msg.isolate }}"></isolate-nav-menu>
      <nav-menu link="{{ gotoLink(msg.isolate.relativeLink('debug/breakpoints')) }}" anchor="breakpoints" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>
    <template if="{{ msg['breakpoints'].isEmpty }}">
      <div>
        <div>No breakpoints</div>
      </div>
    </template>
    <template if="{{ msg['breakpoints'].isNotEmpty }}">
      <ul class="list-group">
      <template repeat="{{ bpt in msg['breakpoints'] }}">
        <li class="list-group-item">
          {{ bpt }}
        </li>
      </template>
      </ul>
    </template>
  </template>
  <script type="application/dart" src="breakpoint_list.dart"></script>
</polymer-element>