{% extends "layouts/base.html" %}
{% load i18n static %}

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

{% block breadcrumbs %}
    <div class="page-header">
        <div class="page-block">
          <div class="row align-items-center">
            <div class="col-md-12">
              <div class="page-header-title">
                <h5 class="m-b-10">{% trans 'Password change' %}</h5>
              </div>
              <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#"><i class="feather icon-home"></i></a></li>
                <li class="breadcrumb-item"><a href="javascript:">{% trans 'Password change' %}</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
{% endblock %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
    <div class="row mt-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="title">
                        {% 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>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        <div class="form-group">
                            {{ form.old_password.errors }}
                            {{ form.old_password.label_tag }} {{ form.old_password }}
                        </div>

                        <div class="form-group">
                            {{ form.new_password1.errors }}
                            {{ form.new_password1.label_tag }} {{ form.new_password1 }}
                            {% if form.new_password1.help_text %}
                                <div class="help">{{ form.new_password1.help_text|safe }}</div>
                            {% endif %}
                        </div>

                        <div class="form-group">
                            {{ form.new_password2.errors }}
                            {{ form.new_password2.label_tag }} {{ form.new_password2 }}
                            {% if form.new_password2.help_text %}
                                <div class="help">{{ form.new_password2.help_text|safe }}</div>
                            {% endif %}
                        </div>

                        <div class="card submit_btn">
                            <div class="card-body">
                                <button type="submit" class="btn btn-sm btn-primary">
                                    {% trans 'Change my password' %}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script type="application/javascript">
        {% if form.errors %}
            notification.danger("{% trans "Please correct the errors below." %}", 'top', 'right');
        {% endif %}
    </script>
{% endblock %}