<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="action_link.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>
        <nav-notify notifications="{{ app.notifications }}"
                    notifyOnPause="{{ notifyOnPause }}"></nav-notify>
        <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="top-nav-menu">
  <template>
    <nav-menu link="/vm" anchor="Observatory" last="{{ last }}">
      <nav-menu-item link="/vm-connect" anchor="Connect to a VM"></nav-menu-item>
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="vm-nav-menu">
  <template>
    <nav-menu link="/vm" anchor="{{ nameAndAddress(vm.name, vm.target) }}" last="{{ last }}">
      <template repeat="{{ isolate in vm.isolates }}">
        <nav-menu-item link="{{ makeLink('/inspect', isolate) }}"
	               anchor="{{ isolate.name }}"></nav-menu-item>
      </template>
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="isolate-nav-menu" extends="observatory-element">
  <template>
    <nav-menu link="{{ makeLink('/inspect', isolate) }}" anchor="{{ isolate.name }}" last="{{ last }}">
      <nav-menu-item link="{{ makeLink('/debugger', isolate) }}"
                     anchor="debugger"></nav-menu-item>
      <nav-menu-item link="{{ makeLink('/class-tree', isolate) }}"
                     anchor="class hierarchy"></nav-menu-item>
      <nav-menu-item link="{{ makeLink('/profiler', isolate) }}"
                     anchor="cpu profile"></nav-menu-item>
      <nav-menu-item link="{{ makeLink('/profiler-table', isolate) }}"
                     anchor="cpu profile (table)"></nav-menu-item>
      <nav-menu-item link="{{ makeLink('/allocation-profiler', isolate) }}"
                     anchor="allocation profile"></nav-menu-item>
      <nav-menu-item link="{{ makeLink('/heap-map', isolate) }}"
                     anchor="heap map"></nav-menu-item>
      <nav-menu-item link="{{ makeLink('/metrics', isolate) }}"
                     anchor="metrics"></nav-menu-item>
      <nav-menu-item link="{{ makeLink('/heap-snapshot', isolate) }}"
                     anchor="heap snapshot"></nav-menu-item>
      <nav-menu-item link="{{ makeLink('/persistent-handles', isolate) }}"
                     anchor="persistent handles"></nav-menu-item>
      <nav-menu-item link="{{ makeLink('/ports', isolate) }}"
                     anchor="ports"></nav-menu-item>
      <nav-menu-item link="{{ makeLink('/logging', isolate) }}"
                     anchor="logging"></nav-menu-item>
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="library-nav-menu" extends="observatory-element">
  <template>
    <nav-menu link="{{ makeLink('/inspect', library) }}"
              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="{{ makeLink('/inspect', cls) }}"
              anchor="{{ cls.name }}" last="{{ last }}">
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="nav-notify" extends="observatory-element">
  <template>
    <style>
      .menu {
        float: right;
      }
      .menu .list {
        display: block;
        position: absolute;
        top: 98%;
        right: 0;
        margin: 0;
        padding: 0;
        width: auto;
        z-index: 1000;
        font: 400 12px 'Montserrat', sans-serif;
        color: white;
        background: none;
      }
    </style>

    <div class="menu">
      <div class="list">
        <template repeat="{{ notification in notifications }}">
          <template if="{{ notification.event != null }}">
            <nav-notify-event notifications="{{ notifications }}"
                              notification="{{ notification }}"
                              event="{{ notification.event }}"
                              notifyOnPause="{{ notifyOnPause }}">
            </nav-notify-event>
          </template>
          <template if="{{ notification.exception != null }}">
            <nav-notify-exception notifications="{{ notifications }}"
                              notification="{{ notification }}"
                              exception="{{ notification.exception }}"
                              stacktrace="{{ notification.stacktrace }}">
            </nav-notify-exception>
          </template>
        </template>
      </div>
    </div>
  </template>
</polymer-element>

<polymer-element name="nav-notify-event" extends="observatory-element">
  <template>
    <style>
      .item {
        position: relative;
        padding: 16px;
        margin-top: 10px;
        margin-right: 10px;
        padding-right: 25px;
        width: 250px;
        color: #ddd;
        background: rgba(0,0,0,.6);
        border: solid 2px white;
        box-shadow: 0 0 5px black;
        border-radius: 5px;
        animation: fadein 1s;
      }

      .wide-item {
        width: 50vw;
      }

      @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      a.link {
        color: white;
        text-decoration: none;
      }
      a.link:hover {
        text-decoration: underline;
      }

      a.boxclose {
        position: absolute;
        display: block;
        top: 4px;
        right: 4px;
        height: 18px;
        width: 18px;
        line-height: 16px;
        border-radius: 9px;
        color: white;
        font-size: 18px;
        cursor: pointer;
        text-align: center;
      }
      a.boxclose:hover {
        background: rgba(255,255,255,0.5);
      }
      .error {
        white-space: pre;
      }
    </style>
    <template if="{{ event != null }}">
      <template if="{{ notifyOnPause && event.isPauseEvent }}">
        <div class="item">
          Isolate
          <a class="link" on-click="{{ goto }}"
             _href="{{ gotoLink('/inspect', event.isolate) }}">{{ event.isolate.name }}</a>
          is paused
          <template if="{{ event.kind == 'PauseStart' }}">
            at isolate start
          </template>
          <template if="{{ event.kind == 'PauseExit' }}">
            at isolate exit
          </template>
          <template if="{{ event.breakpoint != null }}">
            at breakpoint {{ event.breakpoint.number }}
          </template>
          <template if="{{ event.kind == 'PauseException' }}">
            due to exception
          </template>

          <br><br>
          [<a class="link" on-click="{{ goto }}"
              _href="{{ gotoLink('/debugger', event.isolate) }}">debug</a>]

          <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
        </div>
      </template>
      <template if="{{ event.kind == 'ConnectionClosed' }}">
        <div class="item">
          Disconnected from VM: {{ event.reason }}
          <br><br>
          [<a class="link" on-click="{{ goto }}"
              _href="{{ gotoLink('/vm-connect') }}">Connect to a VM</a>]
          <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
        </div>
      </template>
      <template if="{{ event.kind == 'Inspect' }}">
        <div class="item">
          Inspect <any-service-ref ref="{{ event.inspectee }}"></any-service-ref>
          <br><br>
          <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
        </div>
      </template>
      <template if="{{ event.kind == 'IsolateReload' }}">
        <div class="wide-item item">
          Isolate reload
          <template if="{{ event.reloadError != null }}">
            failed:
            <br>
            <br>
            <div class="indent error">{{ event.reloadError.message.toString() }}</div><br>
          </template>
          <template if="{{ event.reloadError == null }}">
            succeeded
          </template>
          <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
        </div>
      </template>
    </template>
  </template>
</polymer-element>


<polymer-element name="nav-notify-exception" extends="observatory-element">
  <template>
    <style>
      .item {
        position: relative;
        padding: 16px;
        margin-top: 10px;
        margin-right: 10px;
        padding-right: 25px;
        width: 500px;
        color: #ddd;
        background: rgba(0,0,0,.6);
        border: solid 2px white;
        box-shadow: 0 0 5px black;
        border-radius: 5px;
        animation: fadein 1s;
      }

      @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      a.link {
        color: white;
        text-decoration: none;
      }
      a.link:hover {
        text-decoration: underline;
      }
      .indent {
        margin-left:20px;
      }

      a.boxclose {
        position: absolute;
        display: block;
        top: 4px;
        right: 4px;
        height: 18px;
        width: 18px;
        line-height: 16px;
        border-radius: 9px;
        color: white;
        font-size: 18px;
        cursor: pointer;
        text-align: center;
      }
      a.boxclose:hover {
        background: rgba(255,255,255,0.5);
      }
      .stacktrace {
        white-space: pre
      }
    </style>
    <template if="{{ isUnexpectedError }}">
      <!-- TODO(turnidge): Add a file-a-bug link to this notification -->
      <div class="item">
        Unexpected exception:<br><br>
        <div class="indent">{{ exception.toString() }}</div><br>
        <template if="{{ stacktrace != null }}">
          Stacktrace:<br><br>
          <div class="indent stacktrace">{{ stacktrace.toString() }}</div>
          <br>
        </template>
        [<a class="link" on-click="{{ goto }}"
            _href="{{ gotoLink('vm-connect') }}">Connect to a different VM</a>]
        <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
    </div>
    </template>
    <template if="{{ isNetworkError }}">
      <div class="item">
        The request cannot be completed because the VM is currently
        disconnected.
        <br><br>
        [<a class="link" on-click="{{ goto }}"
            _href="{{ gotoLink('vm-connect') }}">Connect to a different VM</a>]
        <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
    </div>
    </template>
  </template>
</polymer-element>


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