{{ 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 "triangle-alert" "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">
                We encountered an error while processing your request. Please try again later.
             </p>
            <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 "arrow-left" "w-4 h-4" }}
                    back to home
                </a>
            </div>
        </div>
    </div>
</div>
{{ end }}