{% extends "framework_modern.html" %}
{% load static %}
{% block content %}
  <div class="flex min-h-[60vh] flex-col items-center justify-center p-8">
    <div class="w-full max-w-2xl">
      <div class="alert alert-error mb-6 shadow-lg">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-8 w-8 shrink-0 stroke-current"
          fill="none"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        <div class="flex flex-col">
          <h3 class="text-lg font-bold">
            {{ error_message|default:"An Error Occurred" }}
          </h3>
          <p class="text-sm">
            {{ error_detail|default:"Something went wrong. Please try again later." }}
          </p>
        </div>
      </div>

      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title mb-4 text-2xl">Oops! Something went wrong</h2>
          <p class="text-base-content/70 mb-4">
            {{ error_description|default:"We encountered an unexpected error while processing your request. Our team has been notified and is working to resolve the issue." }}
          </p>
          <div class="card-actions mt-6 justify-end">
            <a href="/" class="btn btn-primary">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="mr-2 h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                />
              </svg>
              Go Home
            </a>
            <button onclick="window.history.back()" class="btn btn-outline">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="mr-2 h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M10 19l-7-7m0 0l7-7m-7 7h18"
                />
              </svg>
              Go Back
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}