{% extends "base.html" %}

{% block content %}
<div class="min-h-[70vh] flex flex-col items-center justify-center py-20 px-6">
    <!-- Icon Container -->
    <div class="relative mb-12">
        <div class="absolute inset-0 bg-rose-500/20 blur-[100px] rounded-full"></div>
        <div
            class="relative w-24 h-24 rounded-3xl bg-gradient-to-tr from-rose-500 to-red-600 flex items-center justify-center shadow-2xl shadow-rose-900/40 transform rotate-12">
            <svg class="w-12 h-12 text-white -rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 15v2m0 0v2m0-2h2m-2 0H10m4-6a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
            </svg>
        </div>
        <!-- Shield Icon -->
        <div
            class="absolute -right-2 -bottom-2 w-10 h-10 rounded-xl bg-slate-900 border border-white/10 flex items-center justify-center shadow-xl">
            <svg class="w-5 h-5 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
        </div>
    </div>

    <!-- Error Text -->
    <div class="text-center max-w-lg mx-auto">
        <h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
            Permission <span class="text-rose-500 text-glow">Denied</span>
        </h1>

        <div class="glass-panel p-6 rounded-2xl mb-12 border-rose-500/10">
            <p class="text-[10px] text-rose-500 font-bold uppercase tracking-[0.2em] mb-3">Security Policy Violation</p>
            <p class="text-slate-400 text-sm leading-relaxed font-medium">
                {{ message or "The requested resource is protected. You must be authenticated with valid administrator
                credentials to access this node's orchestration layer." }}
            </p>

            {% if reason %}
            <div class="mt-4 pt-4 border-t border-white/5 flex items-center justify-center gap-3">
                <span class="text-[10px] text-slate-600 font-mono">REASON:</span>
                <span class="text-[10px] text-slate-300 font-mono font-bold bg-white/5 px-2 py-1 rounded">{{ reason
                    }}</span>
            </div>
            {% endif %}
        </div>

        <!-- Call to Action -->
        <div class="flex flex-col sm:flex-row gap-4 items-center justify-center">
            <a href="/login"
                class="w-full sm:w-auto px-8 py-4 bg-white text-slate-950 rounded-2xl font-bold text-sm hover:bg-rose-500 hover:text-white transition-all shadow-xl shadow-white/5 active:scale-95">
                Authenticate Now
            </a>
            <a href="/"
                class="w-full sm:w-auto px-8 py-4 glass-panel text-slate-300 rounded-2xl font-bold text-sm hover:bg-white/5 transition-all active:scale-95">
                Return Home
            </a>
        </div>
    </div>
</div>

<style>
    .text-glow {
        text-shadow: 0 0 20px rgba(244, 63, 94, 0.4);
    }
</style>
{% endblock %}