{% extends 'core/auth/auth.html' %}
{% load static %}
{% block image %}
    {% static 'img/forgot_password.svg' %}
{% endblock image %}
{% block title %}Forgot Password{% endblock %}
{% block content %}
    <p class="my-8 font-semibold text-center">
        Enter your email address, and we'll send you a link to reset your password
    </p>
    <form method="post">
        {% csrf_token %}
        <div class="mb-4">
            <div class="form-control w-full mt-4">
                <label class="label">
                    <span class="label-text text-base-content undefined">Email Address</span>
                </label>
                <input type="email"
                       required
                       pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
                       placeholder="jsmith@example.com"
                       class="peer input input-bordered w-full">
                <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
                    <span class="label-text-alt text-error">Please enter a valid email.</span>
                </label>
            </div>
        </div>
        <p class="text-center  text-error mt-8"></p>
        <button type="submit" class="btn mt-2 w-full btn-primary">Send Reset Link</button>
        <div class="text-center mt-4">
            <a href="{% url 'core:auth:login' %}"
               class="group text-secondary transition duration-300">
                Go back to login
                <span class="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-secondary"></span>
            </a>
        </div>
    </form>
{% endblock %}
