{% extends "base.html" %}
{% block title %}Forgot Password — IslamInLife Quran App{% endblock %}
{% block body %}
<main style="max-width:380px; margin-top:60px;">
  <div class="card">
    <h2 style="text-align:center; color:#1a3a5c;">🔑 Forgot Password</h2>

    {% if message %}
      <div class="msg msg-success">{{ message }}</div>
      <p style="text-align:center; font-size:13px;">
        <a href="{{ url_for('login') }}">← Back to Login</a>
      </p>
    {% else %}
      <p style="font-size:13px; color:#7f8c8d;">
        Enter the email address associated with your account, and we'll send you a link to reset your password.
      </p>
      <form method="post">
        <label>Email</label>
        <input type="email" name="email" required autofocus>
        <button type="submit" class="btn-save" style="width:100%;">Send Reset Link</button>
      </form>
      <p style="text-align:center; font-size:13px; margin-top:12px;">
        <a href="{{ url_for('login') }}">← Back to Login</a>
      </p>
    {% endif %}
  </div>
</main>
{% endblock %}