<div class="max-w-2xl mx-auto mt-8 p-6">
<div
class="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 mb-6"
>
<div class="flex items-center mb-2">
<svg
class="w-6 h-6 text-red-500 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<h2 class="text-xl font-semibold text-red-800 dark:text-red-200">
{{ error_type }}
</h2>
</div>
<p class="text-red-700 dark:text-red-300">{{ message }}</p>
</div>
{% if !details.is_empty() %}
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-6">
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
Details
</h3>
<pre class="text-xs text-gray-600 dark:text-gray-400 overflow-x-auto">
{{ details }}</pre
>
</div>
{% endif %}
<div class="flex gap-4">
<a
href="/"
class="inline-flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors"
>
<svg
class="w-4 h-4 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"
></path>
</svg>
Go Home
</a>
<a
href="https://github.com/sevki/jetstream/issues"
class="inline-flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md transition-colors"
>
<svg
class="w-4 h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
></path>
</svg>
Report Issue
</a>
</div>
</div>