{{-- v4.7.0 §E2, redessiné en v4.11.0 §D — L'EN-TÊTE DE LA PAGE DU CLIENT.

     À gauche, la marque QUI EXÉCUTE (le logo de l'espace, à défaut celui de l'installation) ; au
     centre, le titre de l'espace avec la puce du marché et le nom du client ; à droite, ce qui
     s'ajoute selon l'écran (installer l'application, se connecter) et le logo DU CLIENT. Le même
     partiel sert la page de lecture, l'espace connecté et l'aperçu : trois écrans, un seul
     en-tête.

     v4.11.0 — Compact sur téléphone, et il NE DÉBORDE PLUS : les deux textes sont tronqués, la
     puce du marché passe sous le titre en dessous de `sm`, et les actions de droite (slot
     `actions`) sont masquées sous `sm` — c'est la barre du bas et le bloc discret qui les portent
     là-bas. --}}
@props(['dashboard', 'sousTitre' => null])

@php
    $logoPrestataire = $dashboard->logoDuPrestataire();
    $logoClient = $dashboard->logoDuClient();
@endphp

<header class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white px-3 py-2.5 shadow-sm sm:gap-4 sm:px-4 sm:py-3 dark:border-white/10 dark:bg-gray-900"
        data-en-tete-espace>
    @if ($logoPrestataire)
        <img src="{{ $logoPrestataire }}" alt="{{ $dashboard->nomDuPrestataire() }}"
             class="h-8 w-auto max-w-[6rem] flex-none object-contain sm:h-10 sm:max-w-[9rem]" data-logo-prestataire>
    @else
        <span class="flex-none truncate text-sm font-semibold text-gray-700 dark:text-gray-200" data-logo-prestataire>{{ $dashboard->nomDuPrestataire() }}</span>
    @endif

    <div class="min-w-0 flex-1">
        <p class="flex min-w-0 items-baseline gap-2 text-sm font-bold text-gray-900 dark:text-white">
            <span class="truncate">{{ $dashboard->nom }}</span>
            @if ($dashboard->reference_marche)
                <span class="ec-accent ec-accent-bord hidden flex-none rounded-full border px-2 py-0.5 text-[11px] font-semibold sm:inline">
                    marché {{ $dashboard->reference_marche }}
                </span>
            @endif
        </p>
        <p class="truncate text-xs text-gray-500 dark:text-gray-400">
            {{ $dashboard->client_nom }}@if ($dashboard->reference_marche)<span class="sm:hidden"> · marché {{ $dashboard->reference_marche }}</span>@endif
            @if ($sousTitre) · {{ $sousTitre }} @endif
        </p>
    </div>

    @isset($actions)
        <div class="hidden flex-none items-center gap-2 sm:flex">{{ $actions }}</div>
    @endisset

    @if ($logoClient)
        <img src="{{ $logoClient }}" alt="{{ $dashboard->client_nom }}"
             class="h-8 w-auto max-w-[5rem] flex-none object-contain sm:h-10 sm:max-w-[9rem]" data-logo-client>
    @endif
</header>