<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>XenZen</title>

    <link href="/static/css/bootstrap.min.css" rel="stylesheet">

    <link href="/static/css/defaults.css" rel="stylesheet">

  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">XenZen</a>
        </div>
      </div>
    </div>

    <div class="container-fluid">
        <br/><br/>
        <form class="form-signin" role="form" method="post" action="{% url 'django.contrib.auth.views.login' %}">

        {% csrf_token %}

        <input type="text" class="form-control" name="username" placeholder="Username" required autofocus>

        <input name="password" type="password" class="form-control" placeholder="Password" required>

        <br/>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>

        {% if form.errors %}
        <p>Your username and password didn't match. Please try again.</p>
        {% endif %}

        <input type="hidden" name="next" value="{{ next }}" />
        <br/>
        Login with <a href="{% url 'social:begin' 'google-oauth2' %}">Google</a>
        </form>

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
  </body>
</html>
