{{ define "title" }}500 · tangled{{ end }}

{{ define "content" }}
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
        <div class="mb-6">
            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
                {{ i "alert-triangle" "w-8 h-8 text-red-500 dark:text-red-400" }}
            </div>
        </div>

        <div class="space-y-4">
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
                500 &mdash; internal server error
            </h1>
            <p class="text-gray-600 dark:text-gray-300">
                Something went wrong on our end. We've been notified and are working to fix the issue.
            </p>
            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded p-3 text-sm text-yellow-800 dark:text-yellow-200">
                <div class="flex items-center gap-2">
                    {{ i "info" "w-4 h-4" }}
                    <span class="font-medium">we're on it!</span>
                </div>
                <p class="mt-1">Our team has been automatically notified about this error.</p>
            </div>
            <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
                <button onclick="location.reload()" class="btn-create gap-2">
                    {{ i "refresh-cw" "w-4 h-4" }}
                    try again
                </button>
                <a href="/" class="btn no-underline hover:no-underline gap-2">
                    {{ i "home" "w-4 h-4" }}
                    back to home
                </a>
            </div>
        </div>
    </div>
</div>
{{ end }}