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

{% load account %}
{% load widget_tweaks %}

{% block head_title %}"Password Reset"{% endblock %}

{% block content %}
<div class="flex flex-col items-center justify-center w-screen h-screen text-gray-700 bg-gray-200">
  <div class="flex flex-col items-center px-4 py-12 mt-12 bg-white rounded shadow-lg">
    <h1 class="mb-5 text-3xl">Password Reset</h1>
    <div>
    <p class="mb-5 text-sm text-center max-w-fit">
      Enter your user account's verified email address and we will send you a password reset link.
    </p>
    </div>
    <form method="POST" action="{% url 'account_reset_password' %}" class="flex flex-col mt-4">
      {% csrf_token %}
      {% for field in form.visible_fields %}
        {{ field|add_label_class:"font-semibold text-xs" }}
        {% render_field field class="flex items-center w-64 h-12 px-4 pb-3 mt-2 rounded focus:outline-none focus:ring-2" %}

        {% for error in field.errors %}
        <span class="flex items-center mt-1 ml-1 text-xs font-medium tracking-wide text-red-500">
          {{ error }}
        </span>
        {% endfor %}
        <span class="pb-4"></span>
      {% endfor %}
      <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">
        Reset my password
      </button>
    </form>
  </div>
</div>
{% endblock %}
