{{--
    v4.16.0 §F — LA FICHE D'UN LIVRABLE : ce qui a été remis, la décision, et la conversation.

    Le pendant exact du détail d'une publication : mêmes blocs (`.valwrap`, `.remarks`), mêmes
    mots, mêmes gestes. Un client qui a appris à valider un post sait déjà valider un livrable.

    ⚠️ `notes_internes`, la tâche du responsable et les statuts de production n'apparaissent nulle
    part, sous aucune condition.

    ⚠️ Les boutons de décision ne sont pas grisés pour un lecteur : ils ne lui sont pas rendus. Un
    bouton grisé est une invitation à insister ; un bouton absent ne pose aucune question.
--}}
<x-espace-client-app.coquille :dashboard="$dashboard" :acces="$acces" :espaces="$espaces" :a-valider="$aValider" :non-lus="$nonLus" onglet="livrables">
    <section class="screen">
        <div class="backbar">
            <a wire:navigate href="{{ route('espace-client.app.livrables', ['espace' => $dashboard->id]) }}" aria-label="Retour aux livrables">
                <x-espace-client-app.icone nom="retour" :taille="18" />
            </a>
            <span class="bt">Livrable</span>
        </div>

        @if ($annonce)
            <div class="alerte {{ $annonce['ton'] }}" style="margin-bottom:14px" role="status">{{ $annonce['texte'] }}</div>
        @endif

        <div class="fiche">
            <p class="ft">{{ $livrable->titre }}</p>
            <p class="fm">{{ $livrable->reference }}{{ $livrable->poste ? ' · '.$livrable->poste->libelle : '' }}</p>

            <div class="fpill">
                @if ($livrable->statut->libelleClient())
                    <span class="pill {{ $pastille }}">{{ $livrable->statut->libelleClient() }}</span>
                @endif
                @if ($livrable->version_courante > 0)
                    <span class="pill prep">Version {{ $livrable->version_courante }}</span>
                @endif
            </div>

            @if ($version?->remis_le)
                <div class="frow">
                    <span class="fk">Remis le</span>
                    <span class="fv">{{ $version->remis_le->format('d/m/Y') }}</span>
                </div>
            @endif

            @if ($version?->reference_bordereau)
                <div class="frow">
                    <span class="fk">Bordereau</span>
                    <span class="fv">{{ $version->reference_bordereau }}</span>
                </div>
            @endif

            @if ($livrable->echeance_le)
                <div class="frow">
                    <span class="fk">Échéance</span>
                    <span class="fv">{{ $livrable->echeance_le->format('d/m/Y') }}</span>
                </div>
            @endif

            @if ($livrable->statut->estValide() && $livrable->valide_le)
                <div class="frow">
                    <span class="fk">Validé le</span>
                    <span class="fv">{{ $livrable->valide_le->format('d/m/Y') }}</span>
                </div>
            @endif

            {{-- LES PIÈCES. Un lien mort ne s'affiche pas comme un lien : quand le fichier n'est
                 plus sur le disque, la ligne reste, sans bouton — le client sait ce qui existe,
                 et nous ne lui promettons pas une porte fermée. --}}
            @if ($pieces !== [] || filled($livrable->lien_drive))
                <div class="frow">
                    <span class="fk">Pièces</span>
                    <span class="fv">
                        @foreach ($pieces as $piece)
                            @if ($piece['url'])
                                <a class="flien" href="{{ $piece['url'] }}"
                                   @if ($piece['externe']) target="_blank" rel="noopener noreferrer" @endif>
                                    {{ $piece['nom'] }} ↗
                                </a>
                            @else
                                <span class="flien">{{ $piece['nom'] }}</span>
                            @endif
                            @if (! $loop->last) <br> @endif
                        @endforeach

                        @if (filled($livrable->lien_drive))
                            @if ($pieces !== []) <br> @endif
                            <a class="flien" href="{{ $livrable->lien_drive }}" target="_blank" rel="noopener noreferrer">
                                Ouvrir le dossier du livrable ↗
                            </a>
                        @endif
                    </span>
                </div>
            @endif

            @if (filled($version?->message))
                <div class="frow">
                    <span class="fk">Message</span>
                    <span class="fv" style="font-weight:500;white-space:pre-line">{{ $version->message }}</span>
                </div>
            @endif
        </div>

        {{-- LES GESTES. Ils n'existent que pour qui peut décider ET quand il y a quelque chose à
             décider. Sinon, l'écran dit simplement où en est le livrable. --}}
        <div class="valwrap">
            @if ($peutDecider)
                <div class="vst">
                    {{ $livrable->statut->libelleClient() }}
                    @if ($reponseAttendueLe)
                        · réponse souhaitée avant <b>le {{ $reponseAttendueLe->format('d/m/Y') }}</b>
                    @endif
                </div>

                <div class="actstack">
                    <button type="button" class="btn primary wide" wire:click="valider" wire:loading.attr="disabled">
                        <x-espace-client-app.icone nom="valider" :taille="16" /> Valider le livrable
                    </button>
                    <button type="button" class="btn mod wide" wire:click="basculerLaCorrection">
                        <x-espace-client-app.icone nom="crayon" :taille="15" /> Demander une modification
                    </button>

                    @if ($correctionOuverte)
                        <div class="modbox">
                            <label class="hide" for="remarque-livrable">Votre remarque</label>
                            <textarea id="remarque-livrable" wire:model="remarque"
                                      placeholder="Qu'aimeriez-vous changer ? (contenu, montage, format, délai…)"></textarea>
                            <button type="button" class="btn primary send wide" wire:click="demanderUneModification" wire:loading.attr="disabled">
                                Envoyer la demande
                            </button>
                        </div>
                    @endif
                </div>
            @else
                <div class="vst" style="margin:0">
                    @if ($livrable->statut->attendLeClient())
                        Ce livrable attend la validation du référent de votre marché.
                    @else
                        {{ $livrable->statut->libelleClient() }} — il n'y a rien à décider ici.
                    @endif
                </div>
            @endif
        </div>

        {{-- v4.17.0 §B — LA CONVERSATION : le FIL de discussion, remises et décisions comprises. --}}
        {{-- v4.17.3 §C3 — `lazy="on-load"` : LA FICHE S'AFFICHE D'ABORD. Le fil compose la
             conversation, compte les non-lus et écrit la lecture — tout cela au moment même où le
             client attend de voir ce qu'on lui propose. Il part donc dans une requête à lui, tirée
             dès que la page est là (et non à la première molette : le fil est en bas de l'écran, et
             marquer lu ne doit pas dépendre d'un geste). --}}
        <livewire:espace-client.app.fil sujet-type="Livrable" :sujet-id="$livrable->id" lazy="on-load" :key="'fil-liv-'.$livrable->id" />
    </section>
</x-espace-client-app.coquille>