{% extends "layout.html.tera" %}
{% block title %}Page Not Found - AdminX{% endblock title %}
{% block content %}
<div class="min-h-[60vh] flex items-center justify-center">
<div class="text-center">
<!-- 404 Illustration -->
<div class="mb-8">
<svg class="mx-auto h-32 w-32 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0118 12a8 8 0 01-8 8 8 8 0 01-8-8 8 8 0 018-8c2.027 0 3.896.753 5.291 2M15 11.5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0z"/>
</svg>
</div>
<!-- Error Code -->
<div class="mb-4">
<h1 class="text-6xl font-bold text-gray-900 dark:text-white">404</h1>
</div>
<!-- Error Message -->
<div class="mb-8">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">Page Not Found</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
Sorry, we couldn't find the page you're looking for. The page might have been moved, deleted, or the URL might be incorrect.
</p>
</div>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<a href="/adminx"
class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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 to Dashboard
</a>
<button onclick="history.back()"
class="inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
Go Back
</button>
</div>
<!-- Additional Help -->
<div class="mt-12 border-t border-gray-200 dark:border-gray-700 pt-8">
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Need Help?</h3>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl mx-auto">
<div class="text-center">
<div class="bg-blue-100 dark:bg-blue-900 dark:bg-opacity-30 rounded-lg p-4 mb-3">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
</svg>
</div>
<h4 class="text-sm font-medium text-gray-900 dark:text-white">Browse Resources</h4>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Check available resources in the menu</p>
</div>
<div class="text-center">
<div class="bg-green-100 dark:bg-green-900 dark:bg-opacity-30 rounded-lg p-4 mb-3">
<svg class="w-6 h-6 text-green-600 dark:text-green-400 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<h4 class="text-sm font-medium text-gray-900 dark:text-white">View Statistics</h4>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Get an overview of your system</p>
</div>
<div class="text-center">
<div class="bg-purple-100 dark:bg-purple-900 dark:bg-opacity-30 rounded-lg p-4 mb-3">
<svg class="w-6 h-6 text-purple-600 dark:text-purple-400 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
</div>
<h4 class="text-sm font-medium text-gray-900 dark:text-white">Check Profile</h4>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Manage your account settings</p>
</div>
</div>
</div>
<!-- Debug Info (Only in Development) -->
{% if app_environment == "development" %}
<div class="mt-8 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg text-left max-w-2xl mx-auto">
<h4 class="text-sm font-medium text-gray-900 dark:text-white mb-2">Debug Information</h4>
<div class="text-xs text-gray-600 dark:text-gray-400 font-mono">
<p><strong>Requested URL:</strong> {{ request_url | default(value="Unknown") }}</p>
<p><strong>Method:</strong> {{ request_method | default(value="Unknown") }}</p>
<p><strong>User Agent:</strong> {{ user_agent | default(value="Unknown") | truncate(length=50) }}</p>
<p><strong>Timestamp:</strong> {{ now() | date(format="%Y-%m-%d %H:%M:%S UTC") }}</p>
</div>
</div>
{% endif %}
</div>
</div>
{% endblock content %}