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

{% block title %}{% if form.errors %}{% translate "Error:" %} {% endif %}{{ block.super }}{% endblock %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'yanleafadmin/css/password-form.css' %}">
{% endblock %}

{% block breadcrumbs %}
<nav class="yanleaf-breadcrumbs">
    <a href="{% url 'admin:index' %}">{% translate '首页' %}</a>
    <span class="separator">&rsaquo;</span>
    <span>{% translate '修改密码' %}</span>
</nav>
{% endblock %}

{% block content_title %}{% endblock %}

{% block content %}
<div id="content-main">

    <form method="post">{% csrf_token %}

    {% if form.errors %}
    <p class="errornote">
        <i class="fas fa-exclamation-triangle"></i>
        {% blocktranslate count counter=form.errors.items|length %}请修正以下错误。{% plural %}请修正以下错误。{% endblocktranslate %}
    </p>
    {% endif %}

    <div class="pwd-card">
        <div class="pwd-card-header">
            <div class="pwd-card-icon"><i class="fas fa-lock"></i></div>
            <div>
                <h2>{% translate '修改密码' %}</h2>
                <p>请输入旧密码，然后输入两遍新密码以确认无误。</p>
            </div>
        </div>
        <div class="pwd-card-body">

            <div class="form-row">
                {{ form.old_password.errors }}
                <label for="{{ form.old_password.id_for_label }}" class="required">{% translate '当前密码' %}</label>
                <div class="pwd-input-wrap">
                    <i class="fas fa-key pwd-icon" style="position:absolute;left:0.8rem;top:50%;transform:translateY(-50%);color:var(--yla-text-muted);font-size:0.85rem;pointer-events:none;"></i>
                    {{ form.old_password }}
                </div>
            </div>

            <div class="form-row">
                {{ form.new_password1.errors }}
                <label for="{{ form.new_password1.id_for_label }}" class="required">{% translate '新密码' %}</label>
                <div class="pwd-input-wrap">
                    <i class="fas fa-lock pwd-icon" style="position:absolute;left:0.8rem;top:50%;transform:translateY(-50%);color:var(--yla-text-muted);font-size:0.85rem;pointer-events:none;"></i>
                    {{ form.new_password1 }}
                </div>
                {% if form.new_password1.help_text %}
                <div class="help">{{ form.new_password1.help_text|safe }}</div>
                {% endif %}
                <ul class="pwd-checklist" id="pwd-checklist">
                    <li class="pending" data-rule="len">8 个字符以上</li>
                    <li class="pending" data-rule="alpha">包含字母</li>
                    <li class="pending" data-rule="digit">包含数字</li>
                    <li class="pending" data-rule="special">大小写/符号</li>
                </ul>
            </div>

            <div class="form-row">
                {{ form.new_password2.errors }}
                <label for="{{ form.new_password2.id_for_label }}" class="required">{% translate '确认新密码' %}</label>
                <div class="pwd-input-wrap">
                    <i class="fas fa-check-double pwd-icon" style="position:absolute;left:0.8rem;top:50%;transform:translateY(-50%);color:var(--yla-text-muted);font-size:0.85rem;pointer-events:none;"></i>
                    {{ form.new_password2 }}
                </div>
            </div>

        </div>
    </div>

    <div class="submit-row">
        <input type="submit" value="{% translate '修改密码' %}" class="default">
    </div>

    </form>
</div>

<script src="{% static 'yanleafadmin/js/password-check.js' %}"></script>
{% endblock %}