{% extends "base.html" %}

{% block title %}Forgot Password{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-base-200 py-12 px-4">
  <div class="card w-full max-w-md bg-base-100 shadow-xl">
    <div class="card-body">
      <h2 class="card-title text-2xl font-bold text-center w-full mb-2">Forgot Password</h2>
      <p class="text-center text-base-content/70 mb-6">
        Enter your email address and we'll send you a link to reset your password.
      </p>

      <!-- Success message -->
      {% if message %}
      <div class="alert alert-success mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>{{ message }}</span>
      </div>
      {% endif %}

      <!-- Error message -->
      {% if error %}
      <div class="alert alert-error mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>{{ error }}</span>
      </div>
      {% endif %}

      <!-- Form -->
      <form method="POST" action="/forgot-password" class="space-y-4">
        <div class="form-control">
          <label class="label" for="email">
            <span class="label-text">Email</span>
          </label>
          <input
            type="email"
            name="email"
            id="email"
            class="input input-bordered w-full"
            placeholder="you@example.com"
            required
            autocomplete="email"
          />
        </div>

        <button type="submit" class="btn btn-primary w-full">Send Reset Link</button>
      </form>

      <!-- Back to login -->
      <div class="text-center mt-6">
        <a href="{{ login_url }}" class="link link-hover text-sm">
          Back to login
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}