{% extends "layouts/base.html.jinja" %}

{% block title %}Access Denied - {{ request.app.title }}{% endblock %}

{% block content %}
<div class="flex items-center justify-center" style="min-height: 60vh;">
    <div class="glass-card p-10 text-center w-full" style="max-width: 550px;">
        <div class="mb-8">
            <i class="fas fa-shield-alt text-danger" style="font-size: 5rem; opacity: 0.8;"></i>
        </div>

        <h1 class="text-3xl font-bold mb-4">Insufficient Privileges</h1>
        <p class="text-muted mb-10 text-lg">
            Your current account (<strong>{{ user_email }}</strong>) does not have the administrative permissions
            required to access the Secure User Registry.
        </p>

        <div class="flex flex-col gap-4">
            <button onclick="logoutAndRetry()" class="btn btn-primary w-full py-4" style="justify-content: center;">
                <i class="fas fa-user-shield mr-2"></i>Authenticate with Different Account
            </button>
            <a href="/" class="btn btn-outline w-full py-4" style="justify-content: center;">
                Return to Application Home
            </a>
        </div>

        <div class="mt-10 pt-6 border-top border-secondary opacity-50">
            <p class="text-xs text-muted uppercase tracking-widest font-bold">Unauthorized Incident Logged</p>
        </div>
    </div>
</div>

<script>
    function logoutAndRetry() {
        // Clear tokens
        document.cookie = "access_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
        localStorage.removeItem('access_token');
        // Redirect to reload (which will show login)
        window.location.reload();
    }
</script>
{% endblock %}