{% extends "base.html" %}

{% block content %}
<div class="max-w-md mx-auto my-12">
  <div class="bg-white p-8 rounded-lg shadow-md text-center">
    <div class="text-red-500 text-5xl mb-6">
      <i class="fas fa-exclamation-circle"></i>
    </div>
    <h1 class="text-2xl font-bold mb-4">{{ error|default("An error occurred", true) }}</h1>
    
    {% if details %}
    <p class="text-gray-600 mb-6">{{ details }}</p>
    {% endif %}
    
    <div class="mt-8">
      <a href="/" class="inline-block bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition">
        Return to Home
      </a>
    </div>
    
    {% if debug_info %}
    <div class="mt-8 p-4 bg-gray-100 rounded text-left">
      <h3 class="font-semibold mb-2">Debug Information:</h3>
      <pre class="text-xs overflow-auto">{{ debug_info }}</pre>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}