{% extends 'base.html' %}

{% block content %}
<div class="content-offset container">
  <div class="panel panel-primary">
    <!-- Default panel contents -->
    <div class="panel-heading">
      <h2>Change Password</h2>
    </div>
    <div class="panel-body">
      {% if form.errors %}
      {% for field, error in form.errors.items %}
      <p class="text-error">
        {{ error }}
      </p>
      {% endfor %}
      {% endif %}

      <form method="post" action="{% url 'change-password' %}" class="form-horizontal">
	    {% csrf_token %}
	    <div class="form-group">
		  <label class="control-label col-sm-3"{{ form.password1.label_tag }}</label>
		         <div class="col-sm-8">
                   <input type="password" id="password1" name="password1"  
                          placeholder="Your secure password" 
                          autocomplete="off"
                          class="form-control"
                          autofocus="autofocus"
                          />
		         </div>
        </div>

<div class="form-group">
  <label class="control-label col-sm-3"{{ form.password2.label_tag }}</label>
		 <div class="col-sm-8">
                   <input type="password" id="password2" name="password2"  
                          placeholder="Your secure password" 
                          autocomplete="off"
                          class="form-control"
                          />
		 </div>
</div>

<div class="form-group">
  <div class="col-sm-8 col-sm-offset-3">
	<button type="submit" class="btn">Change Password</button>
  </div>
</div>

</form>
<p class="text-muted">
  For security purposes, passwords should be at least 6 characters, and not feature on the
  <a href="{% url 'banned' %}" target="_blank">list of banned passwords</a>.
</p>

</div>
</div>
</div>
{% endblock %}
