{#
 # ============================================================================
 # PAGE: ERROR 404 - Page Not Found
 # ============================================================================
 #
 # Page d'erreur 404 personnalisee avec un message amical et des bulles
 # decoratives rappelant l'univers Bubul.
 #
 # Symfony fournit automatiquement les variables:
 # - status_code : 404
 # - status_text : "Not Found"
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/logo/logo-with-text.html.twig
 # - _atoms/icon/icon.html.twig
 # - _atoms/button/button.html.twig
 #
 # ============================================================================
 #}

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

{% block title %}Page introuvable - Bubul{% endblock %}

{% block meta_description %}La page que vous recherchez n'existe pas ou a ete deplacee.{% 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-lg relative">

        {# ================================================================
           Decorative floating bubbles (brand touch)
           ================================================================ #}
        {% if not app.user %}
            <div class="absolute -top-8 -left-8 w-20 h-20 rounded-full bg-primary/5 animate-float-blob-1 hidden sm:block" aria-hidden="true"></div>
            <div class="absolute -bottom-6 -right-6 w-14 h-14 rounded-full bg-primary/8 animate-float-blob-2 hidden sm:block" aria-hidden="true"></div>
            <div class="absolute top-1/3 -right-12 w-10 h-10 rounded-full bg-primary/4 animate-float-blob-3 hidden sm:block" aria-hidden="true"></div>
        {% endif %}

        {# Logo (non-authenticated users only) #}
        {% if not app.user %}
            <div class="flex justify-center mb-10 relative z-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 relative z-10">

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

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

            {# Description #}
            <p class="error-page__message font-primary text-sm sm:text-base text-gray-500 leading-relaxed mb-8 max-w-sm mx-auto">
                Oups ! La page que vous recherchez semble avoir disparu dans une bulle.
                Elle a peut-etre ete deplacee ou n'existe plus.
            </p>

            {# Actions #}
            <div class="flex flex-col gap-3">
                {% if app.user %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Retour au tableau de bord',
                        href: path('app_dashboard'),
                        variant: 'primary',
                        size: 'lg',
                        icon: 'home-smile',
                        iconPosition: 'left',
                        width: 'full'
                    } only %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Page precedente',
                        href: 'javascript:history.back()',
                        variant: 'ghost',
                        size: 'md',
                        icon: 'arrow-left',
                        iconPosition: 'left',
                        width: 'full'
                    } only %}
                {% else %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Retour a l\'accueil',
                        href: path('app_landing'),
                        variant: 'primary',
                        size: 'lg',
                        icon: 'home',
                        iconPosition: 'left',
                        width: 'full'
                    } only %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Page precedente',
                        href: 'javascript:history.back()',
                        variant: 'ghost',
                        size: 'md',
                        icon: 'arrow-left',
                        iconPosition: 'left',
                        width: 'full'
                    } only %}
                {% endif %}
            </div>

        </div>

        {# Footer hint #}
        <p class="text-center text-xs text-gray-400 mt-6 relative z-10">
            Erreur 404 &middot; Page introuvable
        </p>
    </div>
</div>

{% endblock %}