{% extends 'base.html.twig' %}

{% block title %}Erreur serveur - E-Ticket{% endblock %}

{% block body %}
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">
    <section class="relative flex items-center justify-center px-4 pt-20 pb-16 min-h-[60vh]">
        <div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
            <span class="text-[8rem] md:text-[20rem] font-black uppercase leading-none block -rotate-12 translate-y-10">500</span>
        </div>

        <div class="max-w-2xl mx-auto relative z-10 text-center">
            <div class="border-4 border-gray-900 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] p-6 md:p-12">
                <div class="text-5xl md:text-8xl font-black uppercase tracking-tighter mb-4">{{ status_code }}</div>
                <h1 class="text-3xl font-black uppercase tracking-tighter italic mb-4">Erreur serveur</h1>
                <p class="font-bold text-gray-500 italic mb-4">Une erreur inattendue s'est produite. Nos equipes ont ete notifiees.</p>
                {% if error_message is defined and error_message %}
                <div class="card-brutal-red mb-8">
                    <p class="text-sm font-mono break-all">{{ error_message }}</p>
                </div>
                {% endif %}
                <a href="/" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                    Retour a l'accueil
                </a>
            </div>
        </div>
    </section>
</div>
{% endblock %}