{# Header contextuel des pages detail : retour (grosse fleche + titre) a
   gauche, notifications a droite. Remplace le header logo par un vrai header
   de navigation mobile.

   Args :
     - back_fallback (path obligatoire) : URL si l'user arrive en deep link.
     - title : texte affiche a droite de la fleche (titre de l'ecran).
     - notifs : afficher la cloche (defaut true).

   Le JS back-button intercepte et fait history.back() si historique present.
#}
<header class="app-header app-header--detail" role="banner">
    <a href="{{ back_fallback }}"
       class="app-back"
       data-controller="back-button"
       data-action="back-button#trigger"
       aria-label="Retour">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" width="26" height="26" aria-hidden="true">
            <polyline points="15 18 9 12 15 6"/>
        </svg>
        <span class="app-back__title">{{ title }}</span>
    </a>

    <a class="app-header__logo-center" href="{{ path('app_home') }}" aria-label="LivreComment, accueil">
        {{ include('components/_logo_mark.html.twig', { size: 44 }) }}
    </a>

    {% if (notifs ?? true) and app.user %}
        {% set notif_unread = unread_notifications_count() %}
        <a class="app-header__notifs" href="{{ path('app_notifications') }}" aria-label="Notifications{% if notif_unread > 0 %} ({{ notif_unread }} non lues){% endif %}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="22" height="22" aria-hidden="true">
                <path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/>
                <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
            </svg>
            {% if notif_unread > 0 %}
                <span class="nav-badge">{{ notif_unread > 99 ? '99+' : notif_unread }}</span>
            {% endif %}
        </a>
    {% endif %}
</header>