{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Jumpserver </title>
    <link rel="shortcut icon" href="{% static "img/facio.ico" %}" type="image/x-icon">
    {% include '_head_css_js.html' %}
    <link href="{% static "css/jumpserver.css" %}" rel="stylesheet">
    <script src="{% static "js/jumpserver.js" %}"></script>
    <script type="text/javascript" src="{% static 'js/pwstrength-bootstrap.js' %}"></script>

</head>

<body class="gray-bg">

    <div class="loginColumns animated fadeInDown">
        <div class="row">

            <div class="col-md-6">

                <h2 class="font-bold">欢迎使用Jumpserver开源跳板机</h2>

                <p>
                    Jumpserver是一款使用Python, Django开发的开源跳板机系统, 助力互联网企业高效 用户、资产、权限、审计 管理
                </p>

                <p>
                    我们自五湖四海，我们对开源精神无比敬仰和崇拜，我们对完美、整洁、优雅 无止境的追求
                </p>

                <p>
                    专注自动化运维，努力打造 易用、稳定、安全、自动化 的跳板机, 这是我们的不懈的追求和动力
                </p>

                <p>
                    <small>永远年轻，永远热泪盈眶 stay foolish stay hungry</small>
                </p>

            </div>
            <div class="col-md-6">
                <div class="ibox-content">
                    <div><img src="{% static 'img/logo.png' %}" width="82" height="82"> <span class="font-bold text-center" style="font-size: 32px; font-family: inherit">{% trans 'Reset password' %}</span></div>
                    <form class="m-t" role="form" method="post" action="">
                        {% csrf_token %}
                        {% if errors %}
                            <p class="red-fonts">{{ errors }}</p>
                        {% endif %}
                        <div class="form-group">
                            <input type="password" id="id_new_password" class="form-control" name="password" placeholder="{% trans 'Password' %}" required="">
                            {#  密码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>
                        </div>
                        <div class="form-group">
                            <input type="password" id="id_confirm_password" class="form-control" name="password-confirm" placeholder="{% trans 'Password again' %}" required="">
                        </div>
                        <button type="submit" class="btn btn-primary block full-width m-b">{% trans "Setting"  %}</button>

                        <a href="#">
                            <small>Forgot password?</small>
                        </a>

                        <p class="text-muted text-center">
                        </p>
                    </form>
                    <p class="m-t">
                    </p>
                </div>
            </div>
        </div>
        <hr/>
        <div class="row">
            <div class="col-md-12">
                 {% include '_copyright.html' %}
            </div>
        </div>
    </div>

</body>

</html>
 <script>
     $(document).ready(function () {
         // 密码强度校验
         var el = $('#id_password_rules'),
             idPassword = $('#id_new_password'),
             idPopover = $('#popover777'),
             container = $('#container'),
             progress = $('#id_progress'),
             password_check_rules = {{ password_check_rules|safe }},
             minLength = {{ min_length }},
             top = 146, left = 170;

         // 初始化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>
