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

{% block title %}Méthode non autorisée - Bilal Oil{% endblock %}

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

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

    <!-- Message principal -->
    <h3 class="text-2xl font-bold text-gray-800 mb-4">
        Méthode non autorisée
    </h3>

    <!-- Description -->
    <p class="text-gray-600 mb-6 leading-relaxed">
        La méthode HTTP utilisée pour accéder à cette ressource n'est pas autorisée. 
        Le serveur a reçu une requête avec une méthode non supportée pour cette URL.
    </p>

    <!-- Explication technique -->
    <div class="bg-orange-50 rounded-lg p-6 mb-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-code text-orange-500 mr-2"></i>
            Détails techniques
        </h4>
        <ul class="text-left space-y-2 text-gray-600">
            <li class="flex items-start">
                <i class="fas fa-exclamation text-orange-500 mr-2 mt-1 text-sm"></i>
                La méthode HTTP utilisée n'est pas supportée
            </li>
            <li class="flex items-start">
                <i class="fas fa-exchange-alt text-orange-500 mr-2 mt-1 text-sm"></i>
                Tentative d'accès avec une méthode incorrecte (GET, POST, PUT, DELETE)
            </li>
            <li class="flex items-start">
                <i class="fas fa-tools text-orange-500 mr-2 mt-1 text-sm"></i>
                Configuration du serveur ou de l'application restrictive
            </li>
        </ul>
    </div>

    <!-- Solutions -->
    <div class="bg-blue-50 rounded-lg p-6 mb-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-wrench text-blue-500 mr-2"></i>
            Solutions possibles
        </h4>
        <ul class="text-left space-y-2 text-gray-600">
            <li class="flex items-start">
                <i class="fas fa-redo text-blue-500 mr-2 mt-1 text-sm"></i>
                Actualisez la page et réessayez
            </li>
            <li class="flex items-start">
                <i class="fas fa-mouse-pointer text-blue-500 mr-2 mt-1 text-sm"></i>
                Utilisez les liens de navigation du site
            </li>
            <li class="flex items-start">
                <i class="fas fa-browser text-blue-500 mr-2 mt-1 text-sm"></i>
                Vérifiez votre navigateur web
            </li>
            <li class="flex items-start">
                <i class="fas fa-home text-blue-500 mr-2 mt-1 text-sm"></i>
                Retournez à la page d'accueil
            </li>
        </ul>
    </div>

    <!-- Information pour les développeurs -->
    <div class="bg-gray-50 rounded-lg p-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-info-circle text-gray-500 mr-2"></i>
            Information technique
        </h4>
        <p class="text-gray-600 text-sm">
            Cette erreur se produit généralement lors de l'utilisation d'outils de développement 
            ou d'applications externes qui envoient des requêtes HTTP avec des méthodes non supportées 
            par cette ressource spécifique.
        </p>
        
        {% if request.method %}
        <div class="mt-4 p-3 bg-gray-200 rounded text-xs font-mono">
            Méthode utilisée : <span class="font-bold text-red-600">{{ request.method }}</span>
        </div>
        {% endif %}
    </div>

    <!-- Bouton d'actualisation -->
    <div class="mt-6">
        <button onclick="window.location.reload()" 
                class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105">
            <i class="fas fa-sync-alt mr-2"></i>
            Réessayer
        </button>
    </div>
{% endblock %}