{% extends "admin/base_site.html" %}
{% load i18n static %}
{% block extrastyle %}{{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}">{% endblock %}
{% block userlinks %}{% url 'django-admindocs-docroot' as docsroot %}{% if docsroot %}
    <a href="{{ docsroot }}">{% trans 'Documentation' %}</a> / {% endif %} {% trans 'Change password' %} /
    <a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>{% endblock %}
{% block breadcrumbs %}
    <div class="breadcrumbs">
        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
        &rsaquo; {% trans 'Password change' %}
    </div>
{% endblock %}

{% block title %}{{ title }}{% endblock %}
{% block content %}
    {% if request.GET.dialog == '1' %}
    <style type="text/css">
        body, #container{
            background: #FFF!important;
        }
        #content{
            box-shadow: none;
        }
    </style>
    {% endif %}
    <div id="content-main" class="form-main">
            <div>
                <el-alert
                        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.' %}"
                        type="success">
                </el-alert>

                {% if form.errors %}
                    {% if form.errors.items|length == 1 %}
                        <el-alert
                                title="{% trans "Please correct the error below." %}"
                                type="error">
                        </el-alert>
                    {% else %}
                        <el-alert
                                title="{% trans "Please correct the errors below." %}"
                                type="error">
                        </el-alert>
                    {% endif %}
                {% endif %}

                <el-form ref="form" :model="form" label-width="100px" method="post" id="password_form">

                    {% csrf_token %}
                    <el-form-item label="{% trans 'Old password' %}">
                        <el-input v-model="form.oldPassword" name="old_password" show-password></el-input>
                        {{ form.old_password.errors }}
                    </el-form-item>

                    <el-form-item label="{% trans 'New password' %}">
                        <el-input v-model="form.newPassword1" name="new_password1" show-password></el-input>
                        {{ form.new_password1.errors }}
                        {% if form.new_password1.help_text %}
                            <div class="help">{{ form.new_password1.help_text|safe }}</div>
                        {% endif %}
                    </el-form-item>

                    <el-form-item label="{% trans 'Confirm password:' %}">
                        <el-input v-model="form.newPassword2" name="new_password2" show-password></el-input>
                        {{ form.new_password2.errors }}
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="formSubmit()"
                                   style="float: right;"
                                   icon="el-icon-edit-outline">{% trans 'Change my password' %}</el-button>
                    </el-form-item>

                </el-form>


            </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#content-main',
            data: {
                form: {
                    oldPassword: '',
                    new_password1: '',
                    new_password2: ''
                }
            },
            methods: {
                formSubmit: function () {
                    document.getElementById('password_form').submit();
                }
            }
        });
    </script>

{% endblock %}
