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

<polymer-element name="nav-bar" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      nav {
        position: fixed;
        width: 100%;
        z-index: 1000;
      }
      nav ul {
        display: inline-table;
        position: relative;
        list-style: none;
        padding-left: 0;
        margin-left: 0;
        width: 100%;
        z-index: 1000;
        font: 400 16px 'Montserrat', sans-serif;
        color: white;
        background-color: #0489c3;
      }
      nav ul:after {
        content: ""; clear: both; display: block;
      }
      .vertical-spacer {
        height: 40px;
        background-color: #0489c3;
      }
    </style>
    <nav>
      <ul>
        <content></content>
      </ul>
    </nav>
    <div class="vertical-spacer">
    </div>
    <template if="{{ pad }}">
      <br>
    </template>
  </template>
</polymer-element>

<polymer-element name="nav-menu" extends="observatory-element">
  <template>
    <style>
      .menu, .spacer {
        float: left;
      }
      .menu a, .spacer {
        display: block;
        padding: 12px 8px;
        color: White;
        text-decoration: none;
      }
      .menu:hover {
        background: #455;
      }
      .menu ul {
        display: none;
        position: absolute;
        top: 98%;
        list-style: none;
        margin: 0;
        padding: 0;
        width: auto;
        z-index: 1000;
        font: 400 16px 'Montserrat', sans-serif;
        color: white;
        background: #567;
      }
      .menu ul:after {
        content: ""; clear: both; display: block;
      }
      .menu:hover > ul {
        display: block;
      }
    </style>

    <li class="menu">
      <a on-click="{{ goto }}" href="{{ gotoLink(link) }}">{{ anchor }}</a>
      <ul><content></content></ul>
    </li>
    <template if="{{ !last }}">
      <li class="spacer">&gt;</li>
    </template>

  </template>
</polymer-element>

<polymer-element name="nav-menu-item" extends="observatory-element">
  <template>
    <style>
      li {
        float: none;
        border-top: 1px solid #677;
        border-bottom: 1px solid #556; position: relative;
      }
      li:hover {
        background: #455;
      }
      li ul {
        display: none;
        position: absolute;
        top:0;
        left: 100%;
        list-style: none;
        padding: 0;
        margin-left: 0;
        width: auto;
        z-index: 1000;
        font: 400 16px 'Montserrat', sans-serif;
        color: white;
        background: #567;
      }
      li ul:after {
        content: ""; clear: both; display: block;
      }
      li:hover > ul {
        display: block;
      }
      li a {
        display: block;
        padding: 12px 12px;
        color: white;
        text-decoration: none;
      }
    </style>
    <li><a on-click="{{ goto }}" href="{{ gotoLink(link) }}">{{ anchor }}</a>
      <ul><content></content></ul>
    </li>
  </template>
</polymer-element>

<polymer-element name="nav-refresh" extends="observatory-element">
  <template>
    <style>
      .active {
        color: #aaa;
        cursor: wait;
      }
      .idle {
        color: #000;
      }
      li {
        float: right;
        margin: 0;
      }
      li button {
        margin: 3px;
        padding: 8px;
      }
    </style>
    <li>
      <template if="{{ active }}">
        <button class="active" on-click="{{ buttonClick }}">{{ label }}</button>
      </template>
      <template if="{{ !active }}">
        <button class="idle" on-click="{{ buttonClick }}">{{ label }}</button>
      </template>
    </li>
  </template>
</polymer-element>

<polymer-element name="nav-control" extends="observatory-element">
  <template>
    <style>
      .black {
        color: #000;
      }
      li {
        float: right;
        margin: 0;
      }
      button {
        margin: 3px;
        padding: 8px;
      }
    </style>
    <!-- Disable until issues with history in Dartium are fixed
    <li>
      <button class="black" on-click="{{ back }}">&#9664;</button>
      <button class="black" on-click="{{ forward }}">&#9654;</button>
    </li>
    -->
  </template>
</polymer-element>

<polymer-element name="top-nav-menu">
  <template>
    <nav-menu link="/vm" anchor="Observatory" last="{{ last }}">
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="isolate-nav-menu" extends="observatory-element">
  <template>
    <nav-menu link="{{ hashLinkWorkaround }}" anchor="{{ isolate.name }}" last="{{ last }}">
      <nav-menu-item link="{{ isolate.relativeLink('stacktrace') }}"
                     anchor="stack trace"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('profile') }}"
                     anchor="cpu profile"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('allocationprofile') }}"
                     anchor="allocation profile"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('heapmap') }}"
                     anchor="heap map"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('debug/breakpoints') }}"
                     anchor="breakpoints"></nav-menu-item>
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="library-nav-menu" extends="observatory-element">
  <template>
    <nav-menu link="{{ library.link }}"
              anchor="{{ library.name }}" last="{{ last }}">
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="class-nav-menu" extends="observatory-element">
  <template>
    <nav-menu link="{{ cls.link }}"
              anchor="{{ cls.name }}" last="{{ last }}">
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

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