{% extends "base.html" %}
{% load static %}
{% block title %}
    Password Reset
{% endblock title %}
{% block description %}
    Reset your password to regain access to your account. Enter your email to receive a password reset link.
{% endblock description %}
{% block keywords %}
    Password Reset, Reset Password, Account Recovery, Forgot Password, Email, Reset Link
{% endblock keywords %}
{% block og_title %}
    Password Reset - Recover Your Account
{% endblock og_title %}
{% block og_description %}
    Reset your password to regain access to your account. Enter your email to receive a password reset link and recover your account.
{% endblock og_description %}
{% load i18n %}
{% load account %}
{% block content %}
    {% if user.is_authenticated %}
        {% include "account/snippets/already_logged_in.html" %}
    {% endif %}
    <div class="flex min-h-screen items-center justify-center bg-gray-100">
        <div class="w-full max-w-md rounded-lg bg-white p-8 shadow-lg">
            <button onclick="history.back()"
                    class="mb-4 flex items-center text-gray-500 hover:text-[#e74c3c]">
                <svg class="h-5 w-5"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="2"
                     viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                </svg>
                <span class="ml-2 text-sm">{% trans "Back" %}</span>
            </button>
            <h2 class="text-center text-2xl font-semibold text-gray-900">{% trans "Reset your password" %}</h2>
            <p class="mt-2 text-center text-sm text-gray-500">{% trans "We will send you an email to reset your password" %}</p>
            <form method="post"
                  action="{% url 'account_reset_password' %}"
                  class="mt-6 password_reset">
                {% csrf_token %}
                <div class="relative mb-4 form-group {% if form.email.errors %}has-error{% endif %}">
                    <label for="id_email" class="block text-sm font-medium text-gray-700">{% trans "Email" %}</label>
                    <div class="relative">
                        <input type="email"
                               id="id_email"
                               name="email"
                               class="mt-1 block w-full rounded-md border border-gray-300 p-2 pl-10 focus:border-[#e74c3c] focus:outline-none focus:ring-[#e74c3c]"
                               placeholder="Email"
                               required>
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3">
                            <svg class="h-5 w-5 text-gray-400"
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207">
                                </path>
                            </svg>
                        </div>
                    </div>
                    <span class="text-red-500 text-sm help-block">{{ form.email.errors }}</span>
                </div>
                <button type="submit"
                        class="mt-6 w-full rounded-md bg-[#e74c3c] px-4 py-2 text-white hover:bg-[#c0392b] focus:outline-none focus:ring-2 focus:ring-[#e74c3c] focus:ring-opacity-50">
                    {% trans "Email me" %}
                </button>
            </form>
        </div>
    </div>
{% endblock content %}