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

{% block form_content %}
    <div id="reset_password_form_page"></div>
    <h4>Password Reset</h4>

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

        <form id="reset-password-form" method="post">

            {% csrf_token %}

            {{ form.non_field_errors }}

            <div class="form--row">
                <div class="input--icon">
                    {{ form.new_password1 }} <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                </div>
                <small>{{ form.new_password1.help_text }}</small>
            </div>
            {{ form.new_password1.errors }}

            <div class="form--row">
                <div class="input--icon">
                    {{ form.new_password2 }} <span id="confirm-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                </div>
                <small>{{ form.new_password2.help_text }}</small>
            </div>
            {{ form.new_password2.errors }}

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

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

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

{% endblock form_content %}
