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

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

{% block body_inner %}
<div class="bg-white max-w-md w-full sm:border sm:border-gray-200 sm:rounded-xl sm:shadow-2xs">
  <div class="p-8">

    <h1 class="text-center text-2xl font-bold text-gray-900">{% trans "Forgot Your Password?" %}</h1>

    <p class="mt-2 text-center text-sm text-gray-500">
      {% trans "Enter your email address below, and we'll send you an email allowing you to reset it." %}
    </p>

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

    <form method="post" action="{% url 'account_reset_password' %}" class="mt-6 space-y-4">
      {% csrf_token %}
      
      {{ form.non_field_errors }}

      <div>
        <label for="id_email" class="block text-sm mb-1">{% trans "Email" %}</label>
        <input id="id_email" name="email" type="email" required
               value="{{ form.email.value|default_if_none:'' }}"
               class="block w-full rounded-lg border border-gray-200 px-4 py-2.5
                      focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
               placeholder="{% trans 'Email address' %}"
               {% if form.email.errors %}aria-describedby="id_email-error"{% endif %}>
        {% if form.email.errors %}
          <p class="mt-1 text-sm text-red-600" id="id_email-error">{{ form.email.errors|striptags }}</p>
        {% endif %}
      </div>

      <button type="submit"
              class="w-full rounded-lg bg-blue-600 py-3 text-sm font-medium text-white
                     hover:bg-blue-700">
        {% trans "Reset My Password" %}
      </button>
    </form>

    <p class="mt-4 text-center text-sm">
      <a href="{% url 'account_login' %}" class="text-blue-600 hover:underline">{% trans "Back to Sign In" %}</a>
    </p>

  </div>
</div>
{% endblock %}