{% extends "account/base_entrance.html" %}
{% load i18n allauth account %}

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

{% block content %}
<div class="h-screen bg-gray-50 flex flex-col justify-center items-center">

    <div class="bg-white border border-gray-300 w-80 md:w-96 py-8 px-4 flex items-center flex-col mb-3">
   
        <h1 class="text-xl font-semibold mb-4">
            {% trans "Password Reset" %}
        </h1>

        {% if user.is_authenticated %}
            {% include "account/snippets/already_logged_in.html" %}
        {% endif %}

        <p class="text-sm text-center text-gray-700 mb-4">
            {% trans "Forgotten your password? Enter your email address below, and we'll send you an email allowing you to reset it." %}
        </p>

        <form method="post" action="{% url 'account_reset_password' %}" class="mt-4 w-64 md:w-80 flex flex-col">
            {% csrf_token %}
            <!-- Email -->
                <input
                    class="text-xs mt-2 w-full rounded border bg-gray-100 border-gray-300 px-2 py-2 focus:outline-none focus:border-gray-400 active:outline-none"
                    id="email" name="email" placeholder="Email" type="email" required autocomplete="email">
                {% for error in form.email.errors %}
                    <p class="text-xs mt-1 text-red-500 md:text-sm">{{ error }}</p>
                {% endfor %}
            {{ redirect_field }}

            <button type="submit" class="btn btn-primary text-white px-4 py-2 mt-4 rounded ">
                {% trans 'Reset My Password' %}
            </button>
        </form>

        <p class="text-sm text-center text-gray-600 mt-6">
            {% trans "Please contact us if you have any trouble resetting your password." %}
        </p>

    </div>
    
</div>



{% endblock content %}