<!DOCTYPE html>
<html>

<!-- Javascript imports -->
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/common.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.address-1.5.min.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jquery.jqplot.min.js"></script>
<script type='text/javascript'>var STATIC_URL = '{{ STATIC_URL }}';</script>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{% block title %}OtterTune{% endblock %}</title>
<!-- CSS imports -->
<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-select.min.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}js/jqplot/jquery.jqplot.min.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/base.css">
<style>
.btn-sm2,
.btn-group-sm > .btn {
  padding: 6px 9px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 3px;
}
.navbar-btn2 {
  padding: 4px 6px;
  margin-top:12.5px;
  margin-bottom:12.5px;
}

.navbar-form2 {
  padding: 4px 6px;
  margin-top:12.5px;
  margin-bottom:12.5px;
}

.form-control2 {
  margin: 0 0 0 0;
  height: 32px;
  width: 150px;
}

</style>
 
{% block extra_head %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/style.css">
{% endblock %}
</head>

<body style="padding-top: 70px" >

<!-- Navigation -->
<nav class="navbar navbar-default fixed-top topnav navbar-fixed-top " role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand .text-warning" href="{% url 'home_projects' %}">OtterTune</a>
    </div>
    <div class="navbar-collapse collapse">
      {% if user.is_authenticated %}
        <div class="dropdown navbar-right"><a class="dropdown-toggle navbar-text" style="font-size: 18px;" data-toggle="dropdown" href="#">Hello, {{ user.username }} <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li ><a  href="{% url 'change_password' %}" style="font-size: 15px">Change Password</a></li>
            <li ><a  href="{% url 'logout' %}" style="font-size: 15px">Sign Out</a></li>
          </ul>
        </div>
      {% else %}
        <div class="navbar-right">
          <form class="form-inline navbar-form2" role="form" action="{% url 'login' %}" method="POST" style="margin:0 0 0 0">
            {% csrf_token %}
            <input type="text" placeholder="username" class="form-control form-control2" name="username">
            <input type="password" placeholder="password" class="form-control form-control2" name="password">
            <button type="submit" class="btn btn-default navbar-btn2"">Sign in</button>
          </form>
        </div>
      {% endif %}
    </div>
  </div>
</nav>

  {% if form.errors %}
  {% for field in form %}
  {% for error in field.errors %}
  <div class="alert alert-danger">
    <strong>{{ error|escape }}</strong>
  </div>
  {% endfor %}
  {% endfor %}
  {% for error in form.non_field_errors %}
  <div class="alert alert-danger">
    <strong>{{ error|escape }}</strong>
  </div>
  {% endfor %}
  {% endif %}
  {% block body %} {% endblock body %}

</body>
</html>

