{% extends 'templates/main.html' %}

{% block title %}Login{% endblock %}

{% block head %}
<style>


.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin #username {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin #password {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

</style>
{% endblock %}

{% block content %}


<form action="/login" method="post" class="form-signin"> 
<h2 class="form-signin-heading">Please sign in</h2>

<input type="hidden" name="_csrf" value="{{_csrf}}"/>
<input type="hidden" name="r" value="{{r}}"/>
<label for="inputEmail" class="sr-only">{{labels.username}}</label>
<input type="text" id="username" value="{{username}}" name="username" class="form-control" placeholder="{{labels.username}}" autocapitalize="off" required autofocus>
<label for="inputPassword" class="sr-only">{{labels.password}}</label>
<input type="password" id="password" name="password" class="form-control" placeholder="{{labels.password}}" required>
<div class="checkbox">
  <label>
    <input type="checkbox" value="Y" name="remember"> Remember me
  </label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>

<br/>
<p>No account yet? <a href="/register">Register here</a>.
</form>


{% endblock %}