{% extends "base.html" %}
{% load static %}
{% block title %}
Reset Password
{% endblock title %}
{% block content %}
<div class="flex justify-center h-screen w-100 place-items-center bg-gradient">
  <div class="p-8 mx-4 space-y-3 shadow-lg bg-background rounded-4 w-100" style="max-width:30rem">
    {% if app.app_logo %}
    <div class="mb-5 text-center">
      <img src="{{ app.app_logo }}" alt="{{ app.app_info }} Logo" style="height:3.25rem"/>
    </div>
    {% endif %}
    {% if not success %}
    <h1 class="text-3xl font-bold tracking-tight text-center text-black">Reset your Password</h1>
    <p class="mb-5 font-medium text-center text-gray-500 text-md leading-normal">Provide your email address, and we will
      send you a link to reset your password.</p>
    <form method="post" class="mt-6 mb-2 space-y-3 login-form">
      {% csrf_token %}
      <div class="space-y-1">
        {{ form.email.label_tag }}
        {{ form.email }}
      </div>
      <button type="submit" class="w-full mt-5 btn-primary">
        Send Reset Link
      </button>
    </form>
    {% else %}
    <div class="flex justify-center gap-2 text-3xl font-bold tracking-tight text-center text-black place-items-center">
      <div class="leading-none text-warning">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
             stroke="green" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21.801 10A10 10 0 1 1 17 3.335"/>
          <path d="m9 11 3 3L22 4"/>
        </svg>
      </div>
      <span>Email Sent!</span>
    </div>
    <p class="mb-4 font-medium text-center text-gray-500 text-md leading-normal">Check your inbox for the email. If it
      is not there, please check your spam or junk folder.</p>
    {% endif %}
    <a href="{% url 'login' %}" class="btn w-full">← Back to Sign In</a>
  </div>
</div>
<script type="text/javascript">
  {% if success and redirect %}
  setTimeout(() => {
    window.location.href = "{{ redirect }}";
  }, 2000);
  {% endif %}
</script>
{% endblock content %}
