{% 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">
      <div class="text-center">
        <svg class="mx-auto h-12 w-12 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
        
        <h2 class="text-2xl font-bold text-red-600 mt-4">Password Reset Error</h2>
        
        {% if error %}
        <p class="mt-2 text-gray-600">{{ error }}</p>
        {% else %}
        <p class="mt-2 text-gray-600">The password reset link is invalid or has expired.</p>
        {% endif %}
        
        <p class="mt-4 text-gray-600">
          Please request a new password reset link.
        </p>
        
        <div class="mt-8">
          <a href="/auth/forgot-password" class="bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-4 rounded">
            Request New Password Reset
          </a>
        </div>
        
        <div class="mt-4">
          <a href="/auth/login" class="text-irish-green hover:underline">
            Back to Login
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}