{% extends "public_base.html" %}

{% block content %}
<div class="flex items-center justify-center min-h-screen bg-gray-100 px-4">
  <div class="w-full max-w-md">
    <div class="bg-white shadow-xl rounded-2xl overflow-hidden">
      
      <!-- Header -->
      <div class="px-6 py-4 border-b border-gray-200 text-center">
        <h3 class="text-xl font-semibold text-gray-800">Forgot Password?</h3>
      </div>

      <!-- Error Messages -->
      {% if form.errors %}
      <div class="m-4 p-3 rounded-md bg-red-50 border border-red-200 text-red-700">
        <ul class="list-disc list-inside text-sm">
          {% for key, value in form.errors.items %}
            <li>{{ value }}</li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}

      <!-- Body -->
      <div class="px-6 py-4">
        <form method="POST" class="space-y-4">
          {% csrf_token %}

          <!-- Email Field -->
          <div>
            <label for="id_email" class="block text-sm font-medium text-gray-700">Email</label>
            <input type="email" 
                   name="email" 
                   id="id_email"
                   class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                   placeholder="Enter email"
                   autocomplete="email"
                   maxlength="254"
                   required>
          </div>

          <!-- Submit Button -->
          <div>
            <button type="submit" 
                    class="w-full py-2 px-4 bg-gray-900 text-white font-medium rounded-lg shadow hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900">
              Submit
            </button>
          </div>
        </form>
      </div>

      <!-- Footer -->
      <div class="px-6 py-4 border-t border-gray-200 text-center">
        <a href="{% url 'login' %}" class="text-sm text-indigo-600 hover:text-indigo-800">
          Back To Login
        </a>
      </div>

    </div>
  </div>
</div>
{% endblock content %}