{% extends "static_page.html" %}
{% load static %}
{% load i18n %}
{% block navbar %}{% endblock %}
{% block content %}
<div class="content-offset container">
  <div class="panel panel-primary">
    <!-- Default panel contents -->
    <div class="panel-heading">
      <h2>{% trans "Change Password" %}</h2>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">

          {% 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 btn-secondary">
      <i class="fa fa-key"></i>
      {% trans "Change Password" %}
    </button>
  </div>
</div>

</form>
{% url 'banned' as banned %}
<p class="text-muted">

  {% blocktrans %}For security purposes, passwords should be at least 6 characters, and not feature on the
  <a href="{{ banned }}" target="_blank">list of banned passwords</a>.{% endblocktrans %}
</p>

</div>

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

{% block loading %}
{% endblock %}
