{% extends "base.html" %}

{% block content %}
<div class="flex flex-col items-center justify-center py-20">
    <div class="glass-card rounded-2xl p-12 max-w-md text-center space-y-6">
        <div class="w-20 h-20 mx-auto rounded-full bg-redis-500/20 flex items-center justify-center">
            <svg class="w-10 h-10 text-redis-400" 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" />
            </svg>
        </div>
        
        <div class="space-y-2">
            <h1 class="text-2xl font-bold text-white">Error</h1>
            <p class="text-slate-400">{{ error }}</p>
        </div>
        
        <div class="flex gap-3 justify-center">
            <a href="javascript:history.back()" class="px-4 py-2 rounded-lg bg-slate-700/50 text-slate-300 hover:text-white hover:bg-slate-700 transition-all">
                Go Back
            </a>
            <a href="/" class="px-4 py-2 rounded-lg bg-redis-500 text-white hover:bg-redis-600 transition-colors">
                Home
            </a>
        </div>
    </div>
</div>
{% endblock %}