{% extends 'base.html' %}
{% load static %}
{% block title %}Forgot Password{% endblock %}
{% block content %}

<main id="content" role="main" class="w-full  max-w-md mx-auto p-6">
    <div class="mt-7 bg-primary  rounded-none shadow-lg dark:bg-primary  border-2 border-dark">
      <div class="p-4 sm:p-7">
        <div class="text-center">
          <h1 class="block text-2xl font-bold text-gray dark:text-dark">Forgot password?</h1>
          <p class="mt-2 text-sm text-gray dark:text-gray">
            Remember your password?
            <a class="text-secondary decoration-2 hover:underline font-medium" href="{% url 'login' %}">
              Login here
            </a>
          </p>
        </div>
        {% include 'includes/messages.html' %}
        <div class="mt-5">
          <form action="{% url 'forgot_password' %}" method="POST">
            {% csrf_token %}
            <div class="grid gap-y-4">
              <div>
                <label for="email" class="block text-sm font-bold ml-1 mb-2 dark:text-primary">Email address</label>
                <div class="relative">
                  <input type="email" placeholder="Email" id="email" name="email" class="py-3 px-4 block w-full border-2 border-gray-200 rounded-md text-sm focus:border-secondary focus:ring-dark shadow-sm" required aria-describedby="email-error">
                </div>
                <p class="hidden text-xs text-danger mt-2" id="email-error">Please include a valid email address so we can get back to you</p>
              </div>
              <button type="submit" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-dark text-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">Reset password</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    
  </main>
{% endblock %}