{%- set title = title ?? '' -%}
{%- set back_label = back_label ?? 'Retour' -%}
{%- set header_bar_class = header_bar_class ?? '' -%}

<div class="fixed inset-x-0 top-0 z-30 {{ header_bar_class }}"
     data-index-fixed-header
     style="background-color: light-dark(
                rgb(245 245 244 / calc(0.42 + var(--p, 0) * 0.58)),
                rgb(12 10 9 / calc(0.5 + var(--p, 0) * 0.5))
            );
            backdrop-filter: blur(calc(12px * (1 - var(--p, 0))));
            -webkit-backdrop-filter: blur(calc(12px * (1 - var(--p, 0))));
            border-bottom: 1px solid light-dark(
                rgb(231 229 228 / calc(var(--p, 0) * 0.95)),
                rgb(41 37 36 / calc(var(--p, 0) * 0.9))
            )">

    <div data-index-fixed-header-toolbar-wrap>
    <div class="max-w-lg mx-auto h-[60px] flex items-center justify-between px-5">

        <div class="flex items-center gap-2 min-w-0">
            {%- if back_href is defined and back_href -%}
                <a href="{{ back_href }}"
                   class="shrink-0 flex size-9 items-center justify-center rounded-xl bg-white border border-stone-200 text-stone-600 hover:bg-stone-50 transition-colors dark:bg-stone-800 dark:border-stone-700 dark:text-stone-200 dark:hover:bg-stone-700">
                    <span class="sr-only">{{ back_label }}</span>
                    <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/>
                    </svg>
                </a>
            {%- endif -%}
            {%- block back %}{% endblock -%}
            <span class="font-black text-stone-900 dark:text-stone-50 text-[17px] leading-none truncate"
                  aria-hidden="true"
                  style="opacity: clamp(0, calc(var(--p) * 1.67 - 0.67), 1);
                         transform: translateY(calc((1 - var(--p)) * 6px))">
                {{- title -}}
            </span>
        </div>

        <div class="flex items-center gap-2 shrink-0">
            {%- block actions %}{% endblock -%}
        </div>
    </div>
    </div>

</div>