{% extends "base.html" %}
{% block content %}
<div class="flex flex-col items-center justify-center min-h-[60vh] px-4 py-12">
  <div class="text-center">
    <div class="mb-6">
      <svg class="mx-auto h-16 w-16 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <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>
    </div>
    <h1 class="text-3xl font-bold text-gray-900 mb-2">Oops! Something went wrong</h1>
    <p class="text-gray-600 mb-6">{{ error }}</p>
    <div class="flex justify-center">
      <a href="/" class="bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-6 rounded-md mr-4">
        Go Home
      </a>
      <button onclick="window.history.back()" class="border border-irish-green text-irish-green hover:bg-gray-100 font-bold py-2 px-6 rounded-md">
        Go Back
      </button>
    </div>
  </div>
</div>
{% endblock %}