{% load i18n static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ software_title }}</title>
    <link rel="shortcut icon" href="{{ MEDIA_URL }}images/favicon.ico" type="image/x-icon"
          sizes="16x16 24x24 32x32 64x64">
    <link rel="stylesheet" type="text/css" href="{% static "font-awesome/css/font-awesome.min.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "bootstrap/css/bootstrap.min.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "bootstrap/css/it-theme-style.css" %}">
    <link href="{% static 'easytimepro/css/easy-login.css' %}" rel="stylesheet">
    <script src="{% static 'cloud/static/js/jquery/jquery-3.5.1.min.js' %}?v=2.2.4"></script>
    <script src="{% static 'locale/i18n.js' %}?v=1.2"></script>
    <script src="{{ STATIC_URL }}locale/i18n_{{ LANGUAGE_CODE }}.js?v=1.3"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'easytimepro/js/easy-login.js' %}" type='text/javascript'></script>
</head>
<body>
<div class="container-fluid easy-login-main">
    <div class="row">
        <div class="col-lg-5 col-lg-push-7 col-md-6 col-md-push-6 ">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2" id="easyLoginForm">
                    <div class="easy-pwd-reset-mt">
                        <div class="easy-logo-box">
                            <img src="{% static 'easytimepro/images/logo_easyTimePro.png' %}" alt="easyTimePro"
                                 class="easy-time-pro-logo center-block">
                        </div>
                        <div class="mb-3 card easy-login-card">
                            <div class="card-header border-0 p-0 text-left" style="background: none;">

                            </div>
                            <div class="card-body p-0">
                                <form action="" method="post" class="easy-login-form m-0" id="password_reset">
                                    {% csrf_token %}
                                    <h4 class="easy-login-heading">{% trans "password_reset" %}</h4>
                                    <p class="error_tip1" style="color:red;">&nbsp;</p>
                                    <input type="hidden" name="code" value="{{ id }}">
                                    <div class="form-group">
                                        <div class="inner-addon right-addon">
                                            <i class="fa fa-eye-slash easy-icon easy-icon-pass"
                                               id="admin_password_icon"
                                               onclick="viewPassword('admin_password')"></i>
                                            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                                   title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
                                                   id="admin_password" name="password" required
                                                   class="form-control admin_password"
                                                   placeholder="{% trans "user_field_password" %}"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="inner-addon right-addon">
                                            <i class="fa fa-eye-slash easy-icon easy-icon-pass"
                                               id="confirm_password_icon"
                                               onclick="viewPassword('confirm_password')"></i>
                                            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                                   title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
                                                   id="confirm_password" name="confirm_password" required
                                                   class="form-control confirm_password"
                                                   placeholder="{% trans "user_createForm_passwordConfirmation" %}"/>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2">
                                            <button class="btn btn-default easy-login-btn reset-login-btn btn-block">{% trans "reset_password" %}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7 col-lg-pull-5 col-md-6 col-md-pull-6  easy-login-bg">
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12 text-left">
                    <img src="{% static 'easytimepro/images/zkteco-logo.png' %}" alt="ZKTeco Logo"
                         class="img-responsive easy-zk-logo"/>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9 col-sm-12">
                    <div id="easyCarousel" class="carousel carousel-fade  slide easy-login-carousel"
                         data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#easyCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#easyCarousel" data-slide-to="1"></li>
                            <li data-target="#easyCarousel" data-slide-to="2"></li>
                        </ol>
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="{% static 'easytimepro/images/features/geo-fencing.png' %}"
                                     alt="Outdoor Management">
                                <div class="carousel-caption">
                                    <h2 class="carousel-title">Outdoor Management</h2>
                                </div>
                            </div>
                            <div class="item">
                                <img src="{% static 'easytimepro/images/features/geo-fencing2.png' %}"
                                     alt="Notifications">
                                <div class="carousel-caption">
                                    <h2 class="carousel-title">Notifications</h2>
                                </div>
                            </div>
                            <div class="item">
                                <img src="{% static 'easytimepro/images/features/geo-fencing1.png' %}"
                                     alt="Geo Fencing">
                                <div class="carousel-caption">
                                    <h2 class="carousel-title">Geo Fencing</h2>
                                </div>
                            </div>
                        </div>
                        <!-- Left and right controls -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //End -->
<script>
    $("#password_reset").submit(function (e) {
        e.preventDefault();
        var form = $(this);
        $.ajax({
            type: "POST",
            url: "/accounts/easytime_reset_pwd/",
            data: form.serialize(), // serializes the form's elements.
            dataType: "json",
            success: function (callback) {
                if (callback.ret === 0) {
                    window.location.href = "{% url 'biotime:login' %}"
                } else {
                    $(".error_tip1").html(callback.msg);
                }
            }
        });
    });
</script>
</body>
</html>