<!DOCTYPE html>
<html lang="en">
  {% set STATIC = url_for('static', filename='').split('?')[0] %}
  <head>
    <meta charset="utf-8">
    <title>Nereid Project</title>
    <meta name="description" content="Nereid Project">
    <meta name="keywords" content="Nereid Project">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script src="{{ STATIC }}js/jquery-1.7.2.min.js"></script>

    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>

    <link href="{{ STATIC }}css/bootstrap.css" rel="stylesheet">
    <link href="{{ STATIC }}css/font-awesome.css" rel="stylesheet">
    <link href="{{ STATIC }}css/custom.css" rel="stylesheet"> 
    <link href="{{ STATIC }}css/bootstrap-responsive.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ STATIC }}css/jquery.meow.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link href="{{ STATIC }}css/chosen.css" type="text/css" rel="stylesheet" />
    <link href="{{ STATIC }}css/datepicker.css" type="text/css" rel="stylesheet" />
    <link href="{{ STATIC }}css/prettify.css" type="text/css" rel="stylesheet" />
    <link href="{{ STATIC }}css/ui-lightness/jquery-ui-1.8.21.custom.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="{{ STATIC }}js/prettify/prettify.js"></script>
    <script type="text/template" id="popover2-template">
      <div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });">
        <div class="arrow"></div>
        <div class="popover-inner">
          <div class="popover-content">
            <p></p>
          </div>
        </div>
      </div>
    </script>

    {% block extra_head %}
    {% endblock %}

    <script>
      $(document).ready(function(){
        {# Message flashin #}
        {% for category, message in get_flashed_messages(with_categories=True) %}
          $.meow({
            title: '{{ category }}', 
            message: '{{ message }}', 
            class_name: '{{ category }}'
          });
        {% endfor %}

        // Jquery chosen
        $(".chzn-select").chosen();

        // Activate toltips
        $("a[rel='tooltip']").tooltip();
        $("img[rel='tooltip']").tooltip();
        $("a[rel='popover2']").popover({
          template: $("#popover2-template").html(),
        });
        $("a[rel='popover']").popover()

        // Change all timeago dates
        jQuery("abbr.timeago").timeago();

      });
    </script>
  </head>
  <body onload="prettyPrint()">

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
          <ul class="nav pull-right">
            {% if request.is_guest_user %}
              <li><a href="{{ url_for('nereid.website.login') }}">Login</a></li>
            {% else %}
              <div class="btn-group pull-right">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                  <i class="icon-user"></i> {{ request.nereid_user.name }}
                  <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="{{ url_for('nereid.user.profile') }}">Profile</a></li>
                  <li class="divider"></li>
                  <li><a href="{{ url_for('project.work.my_tasks') }}?state=opened">My Tasks</a></li>
                  <li class="divider"></li>
                  <li><a href="{{ url_for('nereid.website.logout') }}">Sign Out</a></li>
                </ul>
              </div>
              <li class="dropdown">
                <a class="dropdown-toggle pull-right" data-toggle="modal" href="#new-project">
                  <i class="icon-plus icon-white"></i> {{ _("New Project") }}
                </a>
              </li>
            {% endif %}
          </ul>
        </div>
      </div>
    </div>

    <div class="container-fluid">
    {% include 'project/new-project-modal.jinja' %}
    {% block container %}
    <div class="span3">
      {% block left %}
      {% endblock %}
    </div>
    <div class="span9">
      {% block main %}
      {% endblock %}
    </div>
    {% endblock %}
    </div>
 
    <!-- Other JS -->
    <script src="{{ STATIC }}js/jquery.min.js"></script>
    <script src="{{ STATIC }}js/jquery-ui.js"></script>
    <script src="{{ STATIC }}js/bootstrap.js"></script>
    <script src="{{ STATIC }}js/chosen.jquery.min.js"></script>
    <script src="{{ STATIC }}js/jquery.timeago.js"></script>
    <script src="{{ STATIC }}js/jquery.meow.js"></script>
    <script src="{{ STATIC }}js/jquery.validate.min.js"></script>
    <script src="{{ STATIC }}js/bootstrap-datepicker.js"></script>
    <script src="{{ STATIC }}js/jquery.validate.min.js"></script>
    <script src="{{ STATIC }}js/jquery.meow.js"></script>
    <script src="{{ STATIC }}js/chosen.jquery.min.js"></script> 
    <script src="{{ STATIC }}js/fullcalendar.min.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script> -->
    {% block scripts %}
    {% endblock %}
  </body>
</html>
