{% extends "base.html" %}
{% load static %}
{% block navbar %}{% endblock %}
{% block content %}
<div class="row content-centered">
  <div class="col-md-4 col-md-offset-4">

    <div class="panel panel-primary login">
      <div class="panel-heading">
        <h1>
            <img src="{% static 'img/ohc-trans.png' %}" />

        {{OPAL_BRAND_NAME}}
        </h1>
      </div>

      <div class="panel-body">    
        {% if form.errors %}
          <p>Your username and password didn't match. Please try again.</p>
        {% endif %}

        <form method="post" action="{% url 'login' %}?next=/" class="form-horizontal">
	      {% csrf_token %}
	      <div class="form-group">
		    <div class="col-sm-12">
              <input type="text" id="username" name="username"  placeholder="Username" 
                     autocomplete="off"
                     class="form-control"
                     autofocus="autofocus"
                     />
		    </div>
          </div>

          <div class="form-group">
		    <div class="col-sm-12">
              <input type="password" name="password" id="password" placeholder="Password" class="form-control">
		    </div>
          </div>

          <div class="form-group">
            <div class="col-sm-12">
	          <button type="submit" class="btn btn-lg btn-primary pull-right" id="login"><i class="fa fa-key"></i> Sign in</button>
            </div>
          </div>

          <input type="hidden" name="next" value="{{ next }}" />
        </form>
      </div>
    </div>
  </div>
</div>
</div>
<script type="text/javascript">
  $(document).ready(function() {
  $('#id_username').focus();
      $('#login').click(
         function(){
           $('.login').addClass('submitted')
         })
  });
</script>
{% endblock %}
