{% extends "errors/base_error.html" %}

{% block title %}Accès interdit - Bilal Oil{% endblock %}

{% block error_content %}
    <!-- Icône d'erreur animée -->
    <div class="mb-6">
        <div class="error-animation">
            <i class="fas fa-lock text-6xl text-red-400 mb-4"></i>
        </div>
    </div>

    <!-- Code d'erreur -->
    <div class="mb-4">
        <h2 class="text-8xl font-bold text-red-300">403</h2>
    </div>

    <!-- Message principal -->
    <h3 class="text-2xl font-bold text-gray-800 mb-4">
        Accès interdit
    </h3>

    <!-- Description -->
    <p class="text-gray-600 mb-6 leading-relaxed">
        Vous n'avez pas l'autorisation d'accéder à cette ressource. 
        Cette page est restreinte ou nécessite des permissions spéciales.
    </p>

    <!-- Raisons possibles -->
    <div class="bg-red-50 rounded-lg p-6 mb-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-question-circle text-red-500 mr-2"></i>
            Pourquoi cette erreur ?
        </h4>
        <ul class="text-left space-y-2 text-gray-600">
            <li class="flex items-start">
                <i class="fas fa-user-times text-red-500 mr-2 mt-1 text-sm"></i>
                Vous n'êtes pas connecté ou votre session a expiré
            </li>
            <li class="flex items-start">
                <i class="fas fa-key text-red-500 mr-2 mt-1 text-sm"></i>
                Vous n'avez pas les permissions nécessaires
            </li>
            <li class="flex items-start">
                <i class="fas fa-shield-alt text-red-500 mr-2 mt-1 text-sm"></i>
                Cette page est réservée aux administrateurs
            </li>
            <li class="flex items-start">
                <i class="fas fa-clock text-red-500 mr-2 mt-1 text-sm"></i>
                Votre compte est temporairement suspendu
            </li>
        </ul>
    </div>

    <!-- Actions recommandées -->
    <div class="bg-blue-50 rounded-lg p-6 mb-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-lightbulb text-blue-500 mr-2"></i>
            Que pouvez-vous faire ?
        </h4>
        <ul class="text-left space-y-2 text-gray-600">
            <li class="flex items-start">
                <i class="fas fa-sign-in-alt text-blue-500 mr-2 mt-1 text-sm"></i>
                Connectez-vous avec vos identifiants
            </li>
            <li class="flex items-start">
                <i class="fas fa-user-cog text-blue-500 mr-2 mt-1 text-sm"></i>
                Vérifiez vos permissions de compte
            </li>
            <li class="flex items-start">
                <i class="fas fa-envelope text-blue-500 mr-2 mt-1 text-sm"></i>
                Contactez l'administrateur pour obtenir l'accès
            </li>
            <li class="flex items-start">
                <i class="fas fa-home text-blue-500 mr-2 mt-1 text-sm"></i>
                Retournez aux pages publiques du site
            </li>
        </ul>
    </div>

    <!-- Connexion rapide -->
    <div class="bg-amber-50 rounded-lg p-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-user text-amber-500 mr-2"></i>
            Espace personnel
        </h4>
        <p class="text-gray-600 mb-4">
            Si vous avez un compte, connectez-vous pour accéder à vos espaces personnalisés.
        </p>
        <div class="space-y-3 md:space-y-0 md:space-x-3 md:flex md:justify-center">
            <a href="/admin/" 
               class="inline-block bg-amber-500 hover:bg-amber-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300">
                <i class="fas fa-sign-in-alt mr-2"></i>
                Administration
            </a>
            <a href="{% url 'bilal:contact' %}" 
               class="inline-block bg-gray-500 hover:bg-gray-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300">
                <i class="fas fa-question mr-2"></i>
                Demander l'accès
            </a>
        </div>
    </div>
{% endblock %}