{{--
    v4.16.0 §F — L'ONGLET LIVRABLES, écran `data-screen="livrables"` de la maquette validée.

    ⚠️ Aucune valeur n'est écrite ici : les groupes, leurs titres et leurs lignes viennent du
    composant, qui les a tirés de la portée `visiblesDuClient` et des libellés client de
    `StatutLivrable`. Un état écrit en dur dans cette vue serait un état faux le jour où
    l'énumération bouge.

    ⚠️ `notes_internes` n'apparaît nulle part : la requête ne le demande pas plus que la vue ne
    l'affiche.
--}}
<x-espace-client-app.coquille :dashboard="$dashboard" :acces="$acces" :espaces="$espaces" :a-valider="$aValider" :non-lus="$nonLus" onglet="livrables">
    <section class="screen">
        <h1 class="h1">Livrables</h1>
        <p class="sub">L'avancement de vos productions.</p>

        @forelse ($groupes as $groupe)
            <p class="slabel" @if ($loop->first) style="margin-top:8px" @endif>
                @if ($groupe['attente'])● @endif{{ $groupe['titre'] }} · {{ count($groupe['cartes']) }}
            </p>

            <div class="list">
                @foreach ($groupe['cartes'] as $carte)
                    <a wire:navigate class="rowc" href="{{ route('espace-client.app.livrable', ['livrable' => $carte['id'], 'espace' => $dashboard->id]) }}">
                        <span class="fic"><x-espace-client-app.icone nom="livrables" :taille="18" /></span>
                        <span class="body">
                            <span class="nm">{{ $carte['titre'] }}</span>
                            <span class="mt">{{ trim($carte['reference'].' · '.$carte['detail'], ' ·') }}</span>
                            @if ($carte['non_lus'] > 0)
                                <span class="mt nouveaux">{{ $carte['non_lus'] }} nouveau{{ $carte['non_lus'] > 1 ? 'x' : '' }} message{{ $carte['non_lus'] > 1 ? 's' : '' }}</span>
                            @endif
                        </span>
                        @if ($carte['etat'])
                            <span class="pill {{ $carte['pastille'] }}">{{ $carte['etat'] }}</span>
                        @else
                            <span class="chev"><x-espace-client-app.icone nom="fleche" :taille="18" /></span>
                        @endif
                    </a>
                @endforeach
            </div>
        @empty
            <div class="vide">
                Aucun livrable ne vous a encore été remis. Dès qu'une production sera prête, elle
                apparaîtra ici et vous recevrez un e-mail pour la valider.
            </div>
        @endforelse
    </section>
</x-espace-client-app.coquille>