{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>自助密码平台</title>
    <link rel="stylesheet" href="{% static 'css/dmaku.css' %}">
    <script type="text/javascript" src="{% static 'js/jquery-1.8.3.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/alert.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/check.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/ddLogin-0.0.5.js' %}"></script>
</head>
<body>
<div class="head-container" id="head-container">
    <p>
        密码自助服务平台
    </p>
</div>
<div class="middle-container" id="middle-container">
    <div class="form-container right-content-container">
        <form name="unlockAccount" method="post" action="unlockAccount" autocomplete="off">
            {% csrf_token %}
            <h1>重置</h1>
            <input type="text" id="username" name="username" readonly placeholder="{{ username }}" value="{{ username }}">
            <p></p>
            <p></p>
            <button id="btn_unlock" type="submit">解锁账号</button>
            <p>会话有效期5分钟</p>
        </form>
    </div>
    <div class="form-container left-content-container">
        <form name="resetPassword" method="post" action="" autocomplete="off">
            {% csrf_token %}
            <h1>重置</h1>
            <span>新密码8至30位长度，要求包含大小写字母及数字。</span>
            <input type="text" id="username" name="username" readonly placeholder="{{ username }}" value="{{ username }}">
            <input type="password" id="new_password" name="new_password" placeholder="新密码">
            <input type="password" id="ensure_password" name="ensure_password" placeholder="再次确认新密码">
            <p></p>
            <button id="btn_reset" type="submit">重置密码</button>
            <p>会话有效期5分钟，重密码会自动解锁账号</p>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>我要重置密码</h1>
                <p></p>
                <p>⬇️点它</p>
                <button class="ghost" id="modifyPwd">切换重置密码</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>我要解锁账号</h1>
                <p></p>
                <p>⬇️点它</p>
                <button class="ghost" id="scanCode">切换解锁账号</button>
            </div>
        </div>
    </div>
</div>
<script src="{% static 'js/dmaku.js' %}"></script>
<script>
    BtnClick("#btn_reset", 'reset', {{ unsecpwd|safe }})
</script>
</body>
</html>