{% extends 'users/_user.html' %}
{% load i18n %}
{% load bootstrap3 %}
{% block user_template_title %}{% trans "Update user" %}{% endblock %}
{% block password %}
    {% bootstrap_field form.password layout="horizontal" %}
    {#  密码popover  #}
    <div id="container">
        <div class="popover fade bottom in" role="tooltip" id="popover777" style=" display: none; width:260px;">
            <div class="arrow" style="left: 50%;"></div>
            <h3 class="popover-title" style="display: none;"></h3>
            <h4>{% trans 'Your password must satisfy' %}</h4><div id="id_password_rules" style="color: #908a8a; margin-left:20px; font-size:15px;"></div>
            <h4 style="margin-top: 10px;">{% trans 'Password strength' %}</h4><div id="id_progress"></div>
            <div class="popover-content"></div>
        </div>
    </div>
    {% bootstrap_field form.public_key layout="horizontal" %}
{% endblock %}

{% block custom_foot_js %}
    {{ block.super }}
<script>
    $(document).ready(function(){
        var el = $('#id_password_rules'),
            idPassword = $('#id_password'),
            idPopover = $('#popover777'),
            container = $('#container'),
            progress = $('#id_progress'),
            password_check_rules = {{ password_check_rules|safe }},
            minLength = {{ min_length }},
            top = idPassword.offset().top - $('.navbar').outerHeight(true) - $('.page-heading').outerHeight(true) - 10 + 34,
            left = 377;

        // 初始化popover
        initPopover(container, progress, idPassword, el, password_check_rules);

        // 监听事件
        idPassword.on('focus', function () {
            idPopover.css('top', top);
            idPopover.css('left', left);
            idPopover.css('display', 'block');
        });
        idPassword.on('blur', function () {
            idPopover.css('display', 'none');
        });
        idPassword.on('keyup', function(){
            var password = idPassword.val();
            checkPasswordRules(password, minLength);
        });

    })
</script>
{% endblock %}
