{% extends "admin/base_site.html" %}
{% load i18n static widget_tweaks %}


{% block breadcrumbs %}
  <div class="breadcrumbs">
    <div class="breadcrumbs-inner">
      <div class="row m-0">
        <div class="col-sm-4">
          <div class="page-header float-left">
            <div class="page-title">
              <h1>{% if title %}{{ title }}{% endif %}</h1>
            </div>
          </div>
        </div>
        <div class="col-sm-8">
          <div class="page-header float-right">
            <div class="page-title">
              <ol class="breadcrumb text-right">
                <li><a href="{% url 'admin:index' %}">{% trans 'Home' %}</a></li>
                <li class="active">{% trans 'Password change' %}</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}


{% block content %}
  <div class="content">
    <div class="animated">
      <div class="card">
        <div class="card-header">
          <strong class="card-title" v-if="headerText">Are you sure you want to change the password?</strong>
        </div>
        <div class="card-body">
          <form method="post">
            {% csrf_token %}
            <div class="row">
              <div class="col-md-9">
                <div class="card">
                  <div class="card-body">
                    {% if form.errors %}
                      <div class="alert alert-danger" role="alert">
                        {% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
                      </div>
                    {% endif %}
                    <p>{% 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." %}</p>
                    <fieldset class="module aligned wide">
                      <div class="form-group">
                        <label for="cc-payment" class="control-label mb-1">{{ form.old_password.label_tag }}</label>
                        {{ form.old_password|add_class:"form-control" }}
                        {% if form.old_password.help_text %}
                          <div class="alert alert-light" role="alert" style="padding-bottom: 0px; margin-top: 0px; padding-left: 0px;">
                            {{ form.old_password.help_text|safe }}
                          </div>
                        {% endif %}
                        {% if form.old_password.errors %}
                          <div class="alert alert-danger" role="alert" style="padding-bottom: 0px; margin-top: 5px; padding-left: 35px;">
                            {{ form.old_password.errors }}
                          </div>
                        {% endif %}
                      </div>
                      <div class="form-group">
                        <label for="cc-payment" class="control-label mb-1">{{ form.new_password1.label_tag }}</label>
                        {{ form.new_password1|add_class:"form-control" }}
                        {% if form.new_password1.help_text %}
                          <div class="alert alert-light" role="alert" style="padding-bottom: 0px; margin-top: 0px; padding-left: 0px;">
                            {{ form.new_password1.help_text|safe }}
                          </div>
                        {% endif %}
                        {% if form.new_password1.errors %}
                          <div class="alert alert-danger" role="alert" style="padding-bottom: 0px; margin-top: 5px; padding-left: 35px;">
                            {{ form.new_password1.errors }}
                          </div>
                        {% endif %}
                      </div>
                      <div class="form-group">
                        <label for="cc-payment" class="control-label mb-1">{{ form.new_password2.label_tag }}</label>
                        {{ form.new_password2|add_class:"form-control" }}
                        {% if form.new_password2.help_text %}
                          <div class="alert alert-light" role="alert" style="padding-bottom: 0px; margin-top: 0px; padding-left: 0px;">
                            {{ form.new_password2.help_text|safe }}
                          </div>
                        {% endif %}
                        {% if form.new_password2.errors %}
                          <div class="alert alert-danger" role="alert" style="padding-bottom: 0px; margin-top: 5px; padding-left: 35px;">
                            {{ form.new_password2.errors }}
                          </div>
                        {% endif %}
                      </div>
                    </div>
                  </fieldset>
                </div>
              </div>
              <div class="col-md-3">
                <input type="submit" class="btn btn-danger btn-lg btn-block" value="{% trans 'Change my password' %}" class="default" />
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
