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

{% load i18n %}

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

{% block content %}
<div class="flex flex-col items-center justify-center w-screen h-screen bg-gray-200">
  <div class="flex flex-col items-center px-4 py-12 bg-white rounded shadow-lg">
    <h1 class="mb-5 text-3xl">{% if token_fail %}{% trans "Bad Token" %}{% else %}{% trans "Change Password" %}{% endif %}</h1>
    {% if token_fail %}
        <div class="px-4 py-3" role="alert">
          <strong class="font-bold">Invalid token!</strong>
          <span class="block text-black">
            {% url 'account_reset_password' as passwd_reset_url %}
            {% blocktrans %}The password reset link was invalid, possibly because it has already been used. <br>
            Please request a
            <a class="text-blue-400 hover:text-blue-500" href="{{ passwd_reset_url }}">new password reset</a>.{% endblocktrans %}
          </span>
        </div>
    {% else %}
      {% if form %}
          <form method="POST" action="{{ action_url }}">
            {% csrf_token %}
            {% include "account/_render_form.html" %}
            <button type="submit" class="w-64 h-12 px-6 mt-8 text-lg text-white uppercase bg-blue-600 rounded text-bold hover:bg-blue-700">{% trans 'change password' %}</button>
          </form>
      {% else %}
          <p>{% trans 'Your password is now changed.' %}</p>
      {% endif %}
    {% endif %}
  </div>
</div>
{% endblock %}
