{{ define "title" }}404 · 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-gray-100 dark:bg-gray-700 flex items-center justify-center">
                {{ i "search-x" "w-8 h-8 text-gray-400 dark:text-gray-500" }}
            </div>
        </div>

        <div class="space-y-4">
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
                404 &mdash; page not found
            </h1>
            <p class="text-gray-600 dark:text-gray-300">
                The page you're looking for doesn't exist. It may have been moved, deleted, or you have the wrong URL.
            </p>
            <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
                <a href="javascript:history.back()" class="btn no-underline hover:no-underline gap-2">
                    {{ i "arrow-left" "w-4 h-4" }}
                    go back
                </a>
            </div>
        </div>
    </div>
</div>
{{ end }}