{#
 # ============================================================================
 # PAGE: ERROR 500 - Internal Server Error
 # ============================================================================
 #
 # Page d'erreur 500 affichee lors d'une erreur interne du serveur.
 # Utilise le theme couleur warning (orange) pour transmettre un message
 # rassurant (nos equipes sont au courant) plutot qu'alarmiste.
 #
 # Symfony fournit automatiquement les variables:
 # - status_code : 500
 # - status_text : "Internal Server Error"
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/logo/logo-with-text.html.twig
 # - _atoms/icon/icon.html.twig
 # - _atoms/button/button.html.twig
 #
 # ============================================================================
 #}

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

{% block title %}Erreur serveur - Bubul{% endblock %}

{% block meta_description %}Une erreur interne est survenue. Nos equipes travaillent a la resolution du probleme.{% endblock %}

{# Une page d'erreur republie l'URL demandee dans canonical/og:url/twitter:url
   (base.html.twig). Sous /p/, cette URL PORTE LE JETON de partage : la laisser
   heriter du « index, follow » par defaut de base.html.twig reviendrait a
   inviter les moteurs a indexer un lien prive. L'en-tete X-Robots-Tag pose par
   PublicShareResponseListener ne couvre que le corps du dispositif ; ce bloc
   couvre TOUTES les URL reflechies, quelle que soit la route. #}
{% block meta_robots %}noindex, nofollow{% endblock %}

{% block show_sidebar %}{{ app.user ? 'true' : 'false' }}{% endblock %}

{% block body %}

<div class="flex items-center justify-center {{ app.user ? 'min-h-[calc(100vh-4rem)]' : 'min-h-screen bg-gradient-to-br from-gray-50 to-gray-200' }} px-4 py-12">
    <div class="w-full max-w-md">

        {# Logo (non-authenticated users only) #}
        {% if not app.user %}
            <div class="flex justify-center mb-10">
                {% include '_atoms/logo/logo-with-text.html.twig' with {
                    size: 'lg',
                    showBadge: false
                } only %}
            </div>
        {% endif %}

        {# Card #}
        <div class="bg-white rounded-2xl shadow-lg p-8 sm:p-10 text-center">

            {# Error code in primary blue #}
            <div class="mb-4">
                <span class="font-secondary font-bold text-8xl sm:text-9xl leading-none text-primary">
                    500
                </span>
            </div>

            {# Title #}
            <h1 class="font-secondary font-bold text-xl sm:text-2xl text-gray-900 mb-3">
                Erreur interne du serveur
            </h1>

            {# Description #}
            <p class="font-primary text-sm sm:text-base text-gray-500 leading-relaxed mb-3 max-w-sm mx-auto">
                Oups ! Une erreur inattendue s'est produite de notre côté.
                Nos équipes sont automatiquement informées et travaillent à sa résolution.
            </p>

            {# Reassurance note #}
            <div class="bg-warning-muted border border-warning-subtle rounded-xl px-4 py-3 mb-8">
                <p class="text-sm text-gray-600 flex items-center justify-center gap-2">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'info',
                        size: 'sm',
                        color: 'warning'
                    } only %}
                    <span>Essayez de rafraîchir la page ou revenez dans quelques instants.</span>
                </p>
            </div>

            {# Actions #}
            <div class="flex flex-col gap-3">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Rafraîchir la page',
                    href: 'javascript:location.reload()',
                    variant: 'primary',
                    size: 'lg',
                    icon: 'refresh',
                    iconPosition: 'left',
                    width: 'full'
                } only %}

                {% if app.user %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Retour au tableau de bord',
                        href: path('app_dashboard'),
                        variant: 'ghost',
                        size: 'md',
                        icon: 'home-smile',
                        iconPosition: 'left',
                        width: 'full'
                    } only %}
                {% else %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Retour a l\'accueil',
                        href: path('app_landing'),
                        variant: 'ghost',
                        size: 'md',
                        icon: 'home',
                        iconPosition: 'left',
                        width: 'full'
                    } only %}
                {% endif %}
            </div>

        </div>

        {# Footer hint #}
        <p class="text-center text-xs text-gray-400 mt-6">
            Erreur 500 &middot; Erreur interne du serveur
        </p>

        {% include 'bundles/TwigBundle/Exception/_admin_debug.html.twig' %}
    </div>
</div>

{% endblock %}