{% extends "orbit/base.html" %}

{% block title %}Access Denied - Django Orbit{% endblock %}

{% block body %}
<div class="min-h-screen flex items-center justify-center bg-grid">
    <div class="max-w-md w-full mx-4">
        <div class="bg-orbit-bg-secondary border border-orbit-border rounded-xl p-8 shadow-2xl relative overflow-hidden">
            <!-- Glow effect -->
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-orbit-accent-rose via-orbit-accent-amber to-orbit-accent-rose opacity-50"></div>
            
            <div class="text-center">
                <!-- Lock Icon -->
                <div class="mx-auto mb-6 w-16 h-16 bg-orbit-bg-tertiary rounded-full flex items-center justify-center">
                    <i data-lucide="lock" class="w-8 h-8 text-orbit-accent-rose"></i>
                </div>
                
                <h1 class="text-2xl font-bold text-orbit-text-primary mb-2">Access Denied</h1>
                <p class="text-orbit-text-secondary mb-8">
                    You don't have permission to access the Orbit dashboard.
                </p>
                
                <div class="space-y-4">
                    {% if login_url %}
                    <a href="{{ login_url }}?next={{ request.path }}" 
                       class="block w-full py-3 px-4 bg-orbit-bg-tertiary hover:bg-orbit-border border border-orbit-border rounded-lg text-orbit-text-primary font-medium transition-colors duration-200 flex items-center justify-center gap-2">
                        <i data-lucide="log-in" class="w-4 h-4"></i>
                        Log In
                    </a>
                    {% endif %}
                    
                    <a href="/" 
                       class="block w-full text-sm text-orbit-text-muted hover:text-orbit-text-secondary transition-colors duration-200">
                        Return Home
                    </a>
                </div>
            </div>
        </div>
        
        <div class="text-center mt-8 text-orbit-text-muted text-xs">
            <p>Django Orbit - Observability Dashboard</p>
        </div>
    </div>
</div>
{% endblock %}