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

{% block title %}Erreur serveur - Bilal Oil{% endblock %}

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

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

    <!-- Message principal -->
    <h3 class="text-2xl font-bold text-gray-800 mb-4">
        Erreur interne du serveur
    </h3>

    <!-- Description -->
    <p class="text-gray-600 mb-6 leading-relaxed">
        Nous rencontrons actuellement un problème technique temporaire. 
        Nos équipes ont été automatiquement informées et travaillent à résoudre cette situation rapidement.
    </p>

    <!-- Informations sur l'erreur (si disponibles) -->
    {% if error %}
    <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
        <h4 class="font-semibold text-red-800 mb-2">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            Détails techniques
        </h4>
        <p class="text-red-700 text-sm font-mono">{{ error }}</p>
    </div>
    {% endif %}

    <!-- 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-tools 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-redo text-blue-500 mr-2 mt-1 text-sm"></i>
                Actualisez la page dans quelques instants
            </li>
            <li class="flex items-start">
                <i class="fas fa-clock text-blue-500 mr-2 mt-1 text-sm"></i>
                Patientez quelques minutes et réessayez
            </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>
            <li class="flex items-start">
                <i class="fas fa-phone text-blue-500 mr-2 mt-1 text-sm"></i>
                Contactez notre support technique si le problème persiste
            </li>
        </ul>
    </div>

    <!-- Statut du système -->
    <div class="bg-yellow-50 rounded-lg p-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-heartbeat text-yellow-500 mr-2"></i>
            Statut du système
        </h4>
        <div class="text-left space-y-2">
            <div class="flex items-center">
                <div class="w-3 h-3 bg-yellow-400 rounded-full mr-3 animate-pulse"></div>
                <span class="text-gray-600">Services en maintenance</span>
            </div>
            <div class="flex items-center">
                <div class="w-3 h-3 bg-green-400 rounded-full mr-3"></div>
                <span class="text-gray-600">Équipe technique mobilisée</span>
            </div>
            <p class="text-sm text-gray-500 mt-3">
                <i class="fas fa-info-circle mr-1"></i>
                Cette page sera automatiquement actualisée dans 30 secondes
            </p>
        </div>
    </div>

    <!-- Bouton d'actualisation -->
    <div class="mt-6">
        <button onclick="window.location.reload()" 
                class="bg-blue-500 hover:bg-blue-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>
            Actualiser maintenant
        </button>
    </div>
{% endblock %}