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

{% block extrahead %}
    {{ block.super }}
    <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
{% endblock %}

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

{% if not is_popup %}
    {% block breadcrumbs %}
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
            <div class="d-block mb-4 mb-md-0">
                <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
                    <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                        <li class="breadcrumb-item">
                            <a href="{% url 'admin:index' %}">
                                <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                </svg>
                            </a>
                        </li>
                        <li class="breadcrumb-item">
                          <a href="{% url 'admin:app_list' opts.app_config.label %}">
                            {{ opts.app_config.verbose_name }}
                          </a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{% url opts|admin_urlname:'change' original.pk|admin_urlquote %}">{{ original|truncatewords:"18" }}</a>
                        </li>
                        <li class="breadcrumb-item">{% trans 'Change password' %}</li>
                    </ol>
                </nav>
            </div>
        </div>
    {% endblock %}
{% endif %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="title">
                        {% blocktrans with username=original %}
                            Enter a new password for the user
                            <strong>{{ username }}</strong>.
                        {% endblocktrans %}
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ form_url }}" method="post" id="{{ opts.model_name }}_form">
                        {% csrf_token %}

                        {% block form_top %}{% endblock %}
                        <input type="text" name="username" value="{{ original.get_username }}" style="display: none">

                        <div class="col-md-8">
                            {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}

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

                            <div class="form-group">
                                {{ form.password2.errors }}
                                {{ form.password2.label_tag }} {{ form.password2 }}
                                {% if form.password2.help_text %}
                                    <div class="help">{{ form.password2.help_text|safe }}</div>
                                {% endif %}
                            </div>
                        </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 extrascript %}
    <script type="application/javascript">
        {% if form.errors %}
            {% if form.errors.items|length == 1 %}
                notification.danger("<p class='{{ direction.panel }}'>" + "{% trans "Please correct the error below." %}" + "</p>", 'top', '{{ direction.notify }}');
            {% else %}
                notification.danger("<p class='{{ direction.panel }}'>" + "{% trans "Please correct the errors below." %}" + "</p>", 'top', '{{ direction.notify }}');
            {% endif %}
        {% endif %}
    </script>
{% endblock %}
