{% extends "admin/base_site.html" %}
{% load i18n admin_static bootstrap_admin_template_tags %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}" />
{% endblock %}

{% block breadcrumbs %}
  <ol class="breadcrumb">
    <li class="home">
      <a href="{% url 'admin:index' %}" title="{% trans 'Home' %}"><span class="glyphicon glyphicon-home"></span></a>
    </li>
    <li>
      {% trans 'Password change' %}
    </li>
  </ol>
{% endblock %}

{% block title %}{{ title }}{% endblock %}
{% block content_title %}<h1>{{ title }}</h1>{% endblock %}

{% block content %}

  <div id="content-main">

    <form action="" method="post">{% csrf_token %}
      <div>
        {% if form.errors %}
            <p class="errornote alert alert-danger">
            {% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
            </p>
        {% endif %}

        <div class="panel panel-default">
          <div class="panel-heading">
            {% trans "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly." %}
          </div>
          <div class="panel-body">
            <fieldset class="module aligned wide">
              <div class="row">
                <div class="col-sm-4{% if form.old_password.errors %} has-error{% endif %}">
                  <label for="id_old_password" class="required">{% trans 'Old password' %}:</label>{{ form.old_password|add_class:'form-control' }}
                  {% for error in form.old_password.errors %}
                    <p class="help-block error">{{ error }}</p>
                  {% endfor %}
                </div>

                <div class="col-sm-4{% if form.new_password1.errors %} has-error{% endif %}">
                  <label for="id_new_password1" class="required">{% trans 'New password' %}:</label>{{ form.new_password1|add_class:'form-control' }}
                  {% for error in form.new_password1.errors %}
                    <p class="help-block error">{{ error }}</p>
                  {% endfor %}
                </div>

                <div class="col-sm-4{% if form.new_password2.errors %} has-error{% endif %}">
                  <label for="id_new_password2" class="required">{% trans 'Password (again)' %}:</label>{{ form.new_password2|add_class:'form-control' }}
                  {% for error in form.new_password2.errors %}
                    <p class="help-block error">{{ error }}</p>
                  {% endfor %}
                </div>
              </div>
            </fieldset>
            <hr>
            <div class="submit-row">
              <input type="submit" value="{% trans 'Change my password' %}" class="default btn btn-primary" />
            </div>
          </div>
        </div>

        <script type="text/javascript">document.getElementById("id_old_password").focus();</script>
      </div>
    </form>
  </div>
{% endblock %}