{% extends "base.html" %}

{% block title %}{{ _('403 Forbidden') }} - {{ app_name }}{% endblock %}

{% block content %}
<div class="flex items-center justify-center min-h-[60vh] px-4 py-8">
    <div class="w-full max-w-md text-center">
        <div class="bg-card-light dark:bg-card-dark rounded-xl border border-border-light dark:border-border-dark shadow-sm p-6 sm:p-8">
            <div class="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-red-100 dark:bg-red-900/30 mb-4">
                <i class="fas fa-ban text-2xl sm:text-3xl text-red-500"></i>
            </div>
            <h1 class="text-5xl font-bold text-text-light/20 dark:text-text-dark/20 mb-2">403</h1>
            <h2 class="text-lg font-semibold text-text-light dark:text-text-dark mb-2">{{ _('Access Denied') }}</h2>
            <p class="text-sm text-text-light/60 dark:text-text-dark/60 mb-6">
                {{ _("You don't have permission to access this resource. This could be due to:") }}
            </p>
            <ul class="text-sm text-text-light/70 dark:text-text-dark/70 space-y-1 mb-6">
                <li><i class="fas fa-circle text-[5px] mr-2 align-middle"></i>{{ _('Insufficient privileges') }}</li>
                <li><i class="fas fa-circle text-[5px] mr-2 align-middle"></i>{{ _('Not logged in') }}</li>
                <li><i class="fas fa-circle text-[5px] mr-2 align-middle"></i>{{ _('Resource access restrictions') }}</li>
            </ul>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
                <a href="{{ url_for('main.dashboard') }}" class="btn btn-primary">
                    <i class="fas fa-home"></i> {{ _('Go to Dashboard') }}
                </a>
                <a href="{{ url_for('auth.login') }}" class="btn btn-secondary">
                    <i class="fas fa-sign-in-alt"></i> {{ _('Login') }}
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}
