{% extends "base.html" %}
{% block content %}
<div class="flex justify-center mt-10">
  <div class="w-full max-w-md">
    <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      <h2 class="text-2xl font-bold text-irish-green mb-6 text-center">Reset Your Password</h2>
      
      {% if error %}
      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
        {{ error }}
      </div>
      {% endif %}
      
      {% if message %}
      <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
        {{ message }}
      </div>
      {% endif %}
      
      <p class="mb-6 text-gray-600">
        Enter your email address and we'll send you a link to reset your password.
      </p>
      
      <form method="POST" action="/auth/forgot-password">
        <div class="mb-6">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
            Email Address
          </label>
          <input 
            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
            id="email" 
            name="email" 
            type="email" 
            placeholder="Enter your email"
            required
          >
        </div>
        
        <div class="flex items-center justify-between">
          <button 
            class="bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full" 
            type="submit"
          >
            Send Reset Link
          </button>
        </div>
        
        <div class="text-center mt-6">
          <a href="/auth/login" class="text-sm text-irish-green hover:underline">
            Back to Login
          </a>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}