{% extends "base/base.html" %}

{% block header %}
  <style>
    body {
      padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
    }
  </style>
  {% block css %}{% endblock %}
{% endblock %}

{% block body %}
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <button type="button" 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>
        </button>
        <a class="brand" href="#">megaproject</a>

        <div class="nav-collapse collapse">
          <ul class="nav">
            <li class="active"><a href="/">Home</a></li>
            <li><a href="/create-project">Create Project</a></li>

            {% if g.user.is_authenticated() %}
              <li class="dropdown pull-right">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  {{ user.nickname }}
                  <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#">Profile</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Actions</li>
                  <li><a href="{{ url_for('logout') }}">Logout</a></li>
                </ul>
              </li>
            {% endif %}

          </ul>

        </div>
        <!--/.nav-collapse -->
      </div>
    </div>
  </div>

  <div class="container">

    {% with messages = get_flashed_messages() %}
      {% if messages %}
        {% for message in messages %}
          <div class="alert alert-info">{{ message }} </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    {% block content %}{% endblock %}

  </div>
{% endblock %}