{% extends 'base.html' %}
{% load i18n static %}
{% load removeSpace_filter %}

{% block title %}Change Password Page{% endblock title %}

{% block head_block %}
    <link rel="shortcut icon" href="/media/icons/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/webmap.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/password_reset.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
{% endblock %}

{% block topbar %}
    <a href="https://reindicator.com" title="Home - REIndicator"><img src="/media/images/logo1.png" align="left" height="50" alt="REIndicator homepage"></a>
    {% if user.is_authenticated %}
    <div class="topbar-dropdown">
        <a href="javascript:void(0);" class="icon dropbtn" onclick="menu_dropdown()">
            <i class="fa fa-bars"></i>
        </a>
        
        <div id="dropdownContent" class="topbar-dropdown-content">
            <a href="/"><i class="fa fa-globe" aria-hidden="true"></i> View Map</a>
            <a href="/admin"><i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
            {% if not user|has_group:"Hiatus" %}
            <a href="https://info.reindicator.com/webinar-replays/" target='_blank'><i class="fa fa-play-circle-o" aria-hidden="true"></i> Webinar Replays</a>
            <a href = "https://info.reindicator.com/" target='_blank'><i class="fa fa-life-ring" aria-hidden="true"></i> Support</a>
            {% endif %}
            <a href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Log Out</a>
        </div>
    </div>
    <div class="webinarLinkDiv"><a href='https://us06web.zoom.us/webinar/register/WN_ueOFjKciRo6d3coAWKgmaw' class="webinarLink" target='_blank'>Next Webinar: <span style='color:#e9ff19;'>December 10</span>.<br>Click Here to Register</a></div>
    <div class = "control-buttons" style="float: right;">
        <a href="/" title="View Map" ><img src="/media/icons/SVG_USA_World.svg" class="menu-button" /></a>
        <a href="/admin" title="Settings" ><img src="/media/icons/setting1.svg" class="settingBtn menu-button" /></a>
        <a href="{% url 'logout' %}?next=/" title="Log Out" style="margin: 0px 15px 0 0;"><img src="/media/icons/logout1.svg" class="logoutBtn menu-button" /></a>
    </div>
    <div class = "welcome-user">
        <div class = 'welcom_msg'>
            <span>
                Welcome,
                <strong>{% firstof user.get_short_name user.get_username %}</strong>.
            </span>
        </div>
    </div>
    {% if not user|has_group:"Hiatus" %}
    <div class = "help-link" style="float: right;">
        <a id="helpLinkBtn" title="Webinar Replays" href = "https://info.reindicator.com/webinar-replays/" target='_blank'><img src="/media/images/webinar_replay.png" class="helpLinkBtn" style="margin-top: 5px;height: 40px;"/></a>
        <a title="Support" href = "https://info.reindicator.com/" target='_blank'><img src="/media/images/training.png" class="helpLinkBtn" style="margin-top: 5px;height: 40px;"/></a>
    </div>
    {% endif %}
    
    {% else %}
    <a href="/login" title="Log In" style="margin: 15px 15px 0 0;"><img src="/media/icons/login1.svg" class="loginBtn menu-button" /></a>
    {% endif %}
{% endblock %}

{% block content %}
    <div id='userChange'>
        <h2>Change Password</h2>
        <p>Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly.</p>
        <form method="post">
            {% csrf_token %}
            <div>
                {% if form.errors %}
                    <p class="errornote">
                    {% blocktrans count form.errors.items|length as counter %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktrans %}
                    </p>
                {% endif %}

                <div class="form-row">
                    {{ form.old_password.errors }}
                    <label for="id_old_password" class="required">{% trans 'Old password' %}:</label>
                    <div class="change_password_field_wrapper">
                        {{ form.old_password }}
                        <img src="/media/icons/eye.png"
                            id="reveal_old_password"
                            style="width:25px;"
                            onclick="togglePasswordReveal('old_password');"
                            onmouseover="onRevealHover('old_password');"
                            onmouseout="offRevealHover('old_password');"
                        />
                    </div>
                </div>

                <div class="form-row">
                    {{ form.new_password1.errors }}
                    <label for="id_new_password1" class="required">{% trans 'New password' %}:</label>
                    <div class="change_password_field_wrapper">
                        {{ form.new_password1 }}
                        <img src="/media/icons/eye.png"
                            id="reveal_new_password1"
                            style="width:25px;"
                            onclick="togglePasswordReveal('new_password1');"
                            onmouseover="onRevealHover('new_password1');"
                            onmouseout="offRevealHover('new_password1');"
                        />
                    </div>
                </div>
                <span class="helptext">
                    <ul>
                        <li>Your password can't be too similar to your other personal information.</li>
                        <li>Your password must contain at least 8 characters.</li>
                        <li>Your password can't be a commonly used password.</li>
                        <li>Your password can't be entirely numeric.</li>
                    </ul>
                </span>
                <div class="form-row">
                {{ form.new_password2.errors }}
                    <label for="id_new_password2" class="required">{% trans 'New password confirmation' %}:</label>
                    <div class="change_password_field_wrapper">
                        {{ form.new_password2 }}
                        <img src="/media/icons/eye.png"
                            id="reveal_new_password2"
                            style="width:25px;"
                            onclick="togglePasswordReveal('new_password2');"
                            onmouseover="onRevealHover('new_password2');"
                            onmouseout="offRevealHover('new_password2');"
                        />
                    </div>
                </div>

                <div class="fieldWrapper setting-submit-flex">
                    <input type="submit" value="Submit">
                    <a href="/editinfo/">{% trans 'Back' %}</a>
                </div>

                <script type="text/javascript">
                    document.getElementById("id_old_password").focus();
                    function onRevealHover(y)
                    {
                        x = document.getElementById("reveal_"+y);
                        x.setAttribute('src', "/media/icons/eye_hover.png");
                    }

                    function offRevealHover(y)
                    {
                        x = document.getElementById("reveal_"+y);
                        x.setAttribute('src', "/media/icons/eye.png");
                    }

                    function togglePasswordReveal(y)
                    {
                        x = document.getElementById("id_"+y);
                        if (x.type === "password") {
                            x.type = "text";
                        } else {
                            x.type = "password";
                        }
                    }
                </script>
            </div>
        </form>
    </div>
{% endblock content %}