{{-- Coquille commune des écrans d'administration : navigation, en-tête,
     barre d'état et encarts de retour. Racine unique, compatible Livewire.

     Props  : titre, sous-titre, largeur (classe max-w-*), feedback, error.
     Slots  : « coin » (l'angle droit de l'en-tête : lien retour, compteur),
              « barre » (pastilles et filtres sous l'en-tête),
              défaut (le contenu de l'écran). --}}
@props([
    'titre',
    'sousTitre' => null,
    'largeur' => 'max-w-5xl',
    'feedback' => null,
    'error' => null,
])

<div>
    <x-admin-nav />
    <div {{ $attributes->class(['mx-auto px-4 py-8', $largeur]) }}>
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <h1 class="font-sans text-2xl font-bold text-title">{{ $titre }}</h1>
                @if ($sousTitre)
                    <p class="mt-1 max-w-3xl text-sm text-muted">{{ $sousTitre }}</p>
                @endif
            </div>
            @isset($coin)
                {{ $coin }}
            @endisset
        </div>

        @isset($barre)
            <div class="mt-4 flex flex-wrap items-center gap-3 text-sm">{{ $barre }}</div>
        @endisset

        @if ($feedback)
            <div class="encart encart--action mt-4 px-4 py-3 text-sm">{{ $feedback }}</div>
        @endif
        @if ($error)
            <div class="encart encart--interdit mt-4 px-4 py-3 text-sm">{{ $error }}</div>
        @endif

        {{ $slot }}
    </div>
</div>