#*
 * Copyright 2012 LinkedIn Corp.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*#

<style type="text/css">
  #banner {
    width: 100%;
    background: orange;
    height: 70px;
    position: float;
    top: 0;
    display: none;
    left: 0;
    text-align: center;
    line-height: 70px;
    font-weight: bold;
  }

  #banner span:hover {
    color: red;
    cursor: pointer;
  }

  #close {
    float: right;
    display: inline-block;
    padding: 2px 5px;
    background: #ccc;
    color: #fff;
  }
</style>
<script type="text/javascript">
  function navMenuClick(url) {
    window.location.href = url;
  }

  function dismissBanner() {
    var dismissBanner = localStorage.getItem("dismissBanner");
    if (dismissBanner != "true") {
      localStorage.setItem("dismissBanner", "true");
    }
    $("#banner").slideUp();
  }

  $(function () {
    var dismissBanner = localStorage.getItem("dismissBanner");
    if (dismissBanner == "true") {
      return;
    }

    if ($("#banner").data("id").indexOf('$') == -1 && $('#banner').is(':empty') == false) {
      $('#banner').attr('Target', '_blank');
      $("#banner").on("click", function () {
        window.open($("#banner").data("url"));
      });

      $("#banner").slideDown(function () {
        if ($("#banner").data("id") == "Warning") {
          $('#bannerText').append('<img ' + 'src=' + '"images/warning.png"'
              + ' width="50" height="50" ' + ' style=' + '"display:inline;" >' + ' </img>');
          $('#bannerText').append('<span style="font-size: 150%;" >' + $("#banner").data("message")
              + '</span>');
        } else if ($("#banner").data("id") == "Action Required") {
          $('#bannerText').append('<img ' + 'src=' + '"images/warning.png"'
              + ' width="50" height="50" ' + ' style=' + '"display:inline;" >' + ' </img>');
          $('#bannerText').append('<span style="font-size: 150%;" >' + $("#banner").data("id")
              + ":    " + '</span>');
          $('#bannerText').append('<span style="font-size: 150%;" >' + $("#banner").data("message")
              + '</span>');
        }

        $('#close').append('dismiss');
        // The banner will side up after 30 seconds
        setTimeout(function () {
          $("#banner").slideUp();
        }, 30000);
      });
    }
  });
</script>

<div id='banner' data-id="$note_type" data-message="$note_message" data-url="$note_url">
  <span id='close' onclick="dismissBanner()"></span>
  <div id="bannerText">
  </div>
</div>

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container-full">
    <div class="navbar-header">
      <div class="navbar-logo">
        <a href="${context}/">Azkaban</a>
        <div class="navbar-version">
          ${version}
        </div>
      </div>

    </div>
    <div class="navbar-left navbar-enviro">
      <div class="navbar-enviro-name">${azkaban_name}</div>
      <div class="navbar-enviro-server">${azkaban_label}</div>
    </div>
    <div class="navbar-collapse collapse">
      #if ($navbar_disabled != 1)
        <ul class="nav navbar-nav">
          <li#if($current_page == 'all') class="active"#end onClick="navMenuClick('$!context/')"><a
              href="$!context/index">Projects</a></li>
          <li#if($current_page == 'schedule') class="active"#end
                                              onClick="navMenuClick('$!context/schedule')"><a
              href="$!context/schedule">Scheduling</a></li>
          <!--<li#if($current_page ==
            'triggers') class="active"#end onClick="navMenuClick('$!context/triggers')"><a href="$!context/triggers">Triggers</a></li>-->
          <li#if($current_page == 'executing') class="active"#end
                                               onClick="navMenuClick('$!context/executor')">
            <a href="$!context/executor">Executing</a></li>
          <li#if($current_page == 'history') class="active"#end
                                             onClick="navMenuClick('$!context/history')"><a
              href="$!context/history">History</a></li>
          <li#if($current_page == 'flowtrigger') class="active"#end
                                                 onClick="navMenuClick('$!context/flowtrigger')">
            <a
                href="$!context/flowtrigger">Flow Trigger Schedule</a></li>

          #foreach ($viewer in $viewers)
            #if (!$viewer.hidden)
              <li#if($current_page == $viewer.pluginName) class="active"#end
                                                          onClick="navMenuClick('$!context/$viewer.pluginPath')">
                <a href="$!context/$viewer.pluginPath">$viewer.pluginName</a></li>
            #end
          #end

          #foreach ($trigger in $triggerPlugins)
            #if (!$trigger.hidden)
              <li#if($current_page == $trigger.pluginName) class="active"#end
                                                           onClick="navMenuClick('$!context/$trigger.pluginPath')">
                <a href="$!context/$trigger.pluginPath">$trigger.pluginName</a></li>
            #end
          #end

          <li#if($current_page == 'doc') class="active"#end
                                         onClick="navMenuClick('https://azkaban.readthedocs.io/en/latest/')">
            <a href="https://azkaban.readthedocs.io/en/latest/">Documentation</a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">${user_id} <b
                class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="$!context?logout">Logout</a></li>
            </ul>
          </li>
        </ul>
      #end
    </div><!--/.nav-collapse -->
  </div>
</div>
