{% extends "account/base.html" %}

{% load static %}

{% block head_title %}
    Change Password
{% endblock head_title %}

{% block inner %}

    <div class="authentication">
        <div class="authentication__content container">
            <img src="{% static 'images/logo.svg' %}" alt="EquiSeq Logo" width="48" height="48">

            <h1 class="authentication__title">
                {% if token_fail %}
                    Bad Token
                {% else %}
                    Change Password
                {% endif %}
            </h1>

            {% if token_fail %}
                {% url 'account_reset_password' as passwd_reset_url %}
                <p class="authentication__text"> The password reset link was invalid, possibly because it has already
                    been used.
                    <br>
                    Please request a <a class="authentication__link" href="{{ passwd_reset_url }}">new password
                        reset</a>.
                </p>
            {% else %}

                {% if form %}
                    <div class="authentication__form-wrapper">
                        <form class="form" method="post" action=".">
                            {% csrf_token %}

                            <div class="form__input-group{% if form.password1.errors %} form__error{% endif %}">
                                {{ form.password1.label_tag }} {{ form.password1 }}

                                {% if form.password1.errors %}
                                    <ul class="form__error-message">
                                        {% for error in form.password1.errors %}
                                            <li>{{ error }}</li>
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                            
                            </div>

                            <div class="form__input-group {% if form.password2.errors %} form__error{% endif %}">
                                {{ form.password2.label_tag }} {{ form.password2 }}

                                {% if form.password2.errors %}
                                    <ul class="form__error-message">
                                        {% for error in form.password2.errors %}
                                            <li>{{ error }}</li>
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                            
                            </div>

                            <button class="button" type="submit">Reset My Password</button>
                        </form>
                    </div>

                {% else %}
                    <p class="authentication__text">Your password is now changed.</p>
                {% endif %}

            {% endif %}

        </div>
        <div class="authentication__background"></div>
    </div>

{% endblock inner %}