{% extends 'portal/base.html' %}
{% load static %}

{% block scripts %}
{{ block.super }}
{% endblock scripts %}

{% block content %}

<div id="reset_password_form_page"></div>

{% if usertype == "TEACHER" %}
<div class="background form--register form--register--teacher col-sm-12">
{% else %}
<div class="background form--register form--register--indep-student col-sm-12">
{% endif %}
    <div class="col-sm-6 col-center">
        <h1>Password Reset</h1>

        {% if validlink %}
        <p>Please enter a new password and confirm it in the boxes below to reset your account&rsquo;s password.</p>

        <form method="post">

            {% csrf_token %}

            {{ form.non_field_errors }}

            <label for="{{ form.new_password1.id }}">{{ form.new_password1.label }}</label>
            {{ form.new_password1 }}
            {{ form.new_password1.errors }}

            <label for="{{ form.new_password2.id }}">{{ form.new_password2.label }}</label>
            {{ form.new_password2 }}
            {{ form.new_password2.errors }}

            {% if usertype == "TEACHER" %}
            <div class="row--under">
                <div class="password-strength-container">
                    <div id="teacher-password-sign" class="password-strength-sign"></div>
                    <div id="teacher-password-text" class="password-strength-text"></div>
                </div>
            </div>
            {% else %}
            <div class="row--under">
                <div class="password-strength-container">
                    <div id="student-password-sign" class="password-strength-sign"></div>
                    <div id="student-password-text" class="password-strength-text"></div>
                </div>
            </div>
            {% endif %}

            <section class="button-group">
                <a class="button button--regular button--secondary button--secondary--light" href="{% url 'home' %}">Cancel</a>
                {% if usertype == "TEACHER" %}
                <button id="teacher_update_button" type="submit" class="button button--regular button--primary--general-educate">Update</button>
                {% else %}
                <button id="student_update_button" type="submit" class="button button--regular button--primary--general-play">Update</button>
                {% endif %}
            </section>
        </form>
        {% else %}
        <img title="Sad Face" alt="Verification failure" src="{% static 'portal/img/sadface.png' %}">
        <p>The password reset link used was invalid. Did you use it once already?</p>
        <p>Please request to reset your password again.</p>
        <section class="background">
            {% if usertype == "TEACHER" %}
            <a href="{% url 'home' %}" class="button button--regular button--primary--general-educate">Back to homepage</a>
            {% else %}
            <a href="{% url 'home' %}" class="button button--regular button--primary--general-play">Back to homepage</a>
            {% endif %}
        </section>
        {% endif %}
    </div>
</div>

<script type="text/javascript" src="{% static 'portal/js/passwordStrength.js' %}"></script>
<script>
    var TEACHER_PASSWORD_FIELD_ID = '{{ form.new_password1.auto_id }}';
    var INDEP_STUDENT_PASSWORD_FIELD_ID = '{{ form.new_password1.auto_id }}';
</script>

{% endblock content%}
