{% extends "_base.html" %}

{% block title %}Forgot password{% endblock %}

{% block styles %}
<link rel="stylesheet" href="/static/css/auth.css?v={{ version }}">
{% endblock %}

{% block header %}{% endblock %}

{% block content %}
<div class="auth-page">

  <!-- Email input -->
  <div id="auth-forgot-section">
    <p class="auth-page-desc">Enter your email and we'll send you a password reset link.</p>
    <form id="forgot-form" onsubmit="handleForgotPassword(event)">
      <div class="auth-form-group" data-field="email">
        <label for="forgot-email">Email</label>
        <input type="email" name="email" id="forgot-email" required maxlength="254" autocomplete="email" />
      </div>
      <button type="submit" class="auth-submit-btn" data-original-text="Send reset link">Send reset link</button>
    </form>
    <div class="auth-links">
      <a href="/pages/auth/login">Back to sign in</a>
    </div>
  </div>

  <!-- Password reset (when a token is present) -->
  <div id="auth-reset-section" style="display: none;">
    <form id="reset-form" onsubmit="handleResetPassword(event)">
      <div class="auth-form-group" data-field="password">
        <label for="reset-password">New password</label>
        <input type="password" name="password" id="reset-password" required minlength="8" maxlength="128" autocomplete="new-password" />
        <span class="auth-hint">At least 8 characters</span>
      </div>
      <div class="auth-form-group" data-field="password_confirm">
        <label for="reset-password-confirm">Confirm password</label>
        <input type="password" name="password_confirm" id="reset-password-confirm" required maxlength="128" autocomplete="new-password" />
      </div>
      <button type="submit" class="auth-submit-btn" data-original-text="Change password">Change password</button>
    </form>
  </div>

</div>

<script>
(function() {
  var params = new URLSearchParams(window.location.search);
  var resetToken = params.get('reset');
  if (resetToken) {
    window.resetPasswordToken = resetToken;
    document.getElementById('auth-forgot-section').style.display = 'none';
    document.getElementById('auth-reset-section').style.display = '';
  }
})();
</script>
{% endblock content %}