{{--
    v4.15.0 §B/§C/§D — LE DÉTAIL D'UNE PUBLICATION, écran `data-screen="post"` de la maquette.

    ⚠️ Le texte affiché est `contenu()['texte_fr']` — le contenu qui FAIT FOI, figé si la
    publication est décidée. Jamais `$publication->texte_fr` : sur une publication validée, la
    colonne brute peut avoir bougé, et le client doit relire ce qu'il a validé.

    ⚠️ `notes_internes` n'apparaît 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="publications">
    <section class="screen">
        <div class="backbar">
            <a wire:navigate href="{{ route('espace-client.app.publications', ['espace' => $dashboard->id]) }}" aria-label="Retour aux publications">
                <x-espace-client-app.icone nom="retour" :taille="18" />
            </a>
            <span class="bt">Publication</span>
        </div>

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

        {{-- L'APERÇU SOCIAL : la publication telle qu'elle paraîtra sur le compte du client. --}}
        <div class="post">
            <div class="phead">
                <span class="pav" aria-hidden="true">
                    @if ($dashboard->logoDuClient())
                        <img src="{{ $dashboard->logoDuClient() }}" alt="">
                    @else
                        {{ \App\Support\EspaceClient\AppClient::initiales($dashboard->nomCourtDuClient()) }}
                    @endif
                </span>
                <span>
                    <span class="pn">{{ $dashboard->nomCourtDuClient() }}</span>
                    <span class="pd">{{ ucfirst($publication->quandPhrase()) }}</span>
                </span>
                @if ($canaux !== [])
                    <span class="nets">
                        @foreach ($canaux as $canal)
                            <span class="net" title="{{ $canal }}">{{ \Illuminate\Support\Str::limit($canal, 4, '') }}</span>
                        @endforeach
                    </span>
                @endif
            </div>

            @if ($visuel['type'] === 'image')
                <div class="visual image">
                    <img src="{{ $visuel['url'] }}" alt="Visuel de la publication « {{ $publication->titre }} »">
                </div>
            @else
                <div class="visual">
                    <span class="tag">{{ $publication->type->label() }}</span>
                    <span class="ev">{{ $dashboard->nomCourtDuClient() }}</span>
                    <span class="tt">{{ $publication->titre }}</span>
                    <span class="yr">{{ $visuel['lien'] ? 'Le visuel est au bout du lien.' : 'Visuel à venir' }}</span>
                </div>
            @endif

            {{-- v4.17.2 §F — LE LIEN, TOUJOURS ATTEIGNABLE. Il vivait DANS la vignette de repli :
                 dès qu'une publication portait une image, il n'était plus rendu nulle part, et le
                 client cherchait le lien qu'on lui avait annoncé par e-mail. Ici, il est sous le
                 visuel — qu'il y ait une image ou non. --}}
            @if (filled($visuel['lien']))
                <a class="lien-externe" href="{{ $visuel['lien'] }}" target="_blank" rel="noopener noreferrer">
                    Ouvrir le lien ↗
                </a>
            @endif

            @if (filled($contenu['texte_fr']))
                <div class="cap">{{ $contenu['texte_fr'] }}</div>
            @endif

            @if (filled($contenu['texte_ar']))
                <div class="cap ar" lang="ar">{{ $contenu['texte_ar'] }}</div>
            @endif
        </div>

        {{-- §C — 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 la publication. --}}
        <div class="valwrap">
            @if ($peutDecider)
                <div class="vst">
                    {{ $publication->statut->libelleClient() }}
                    @if ($reponseAttendueLe)
                        · réponse souhaitée avant <b>le {{ $reponseAttendueLe->format('d/m/Y') }}</b>
                    @endif
                </div>

                @if ($apercu)
                    {{-- On ne signe pas sans lire : voici l'e-mail qui partira, avec le contenu
                         retenu. C'est ce texte qu'on relira pour prouver ce qui a été décidé. --}}
                    <div class="apercu">
                        <div class="al">Ce qui sera envoyé</div>
                        <div class="aj">{{ $apercu['sujet'] }}</div>
                        <div class="ac">{{ $apercu['corps'] }}</div>
                        @if ($apercu['destinataires'] !== [])
                            <div class="ad">À : {{ implode(', ', $apercu['destinataires']) }}</div>
                        @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" /> Confirmer la validation
                        </button>
                        <button type="button" class="btn mod wide" wire:click="annulerLApercu">Revenir en arrière</button>
                    </div>
                @else
                    <div class="actstack">
                        <button type="button" class="btn primary wide" wire:click="preparerLaValidation">
                            <x-espace-client-app.icone nom="valider" :taille="16" /> Valider la publication
                        </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">Votre remarque</label>
                                <textarea id="remarque" wire:model="remarque"
                                          placeholder="Qu'aimeriez-vous changer ? (visuel, texte, date de publication…)"></textarea>
                                <button type="button" class="btn primary send wide" wire:click="demanderUneModification" wire:loading.attr="disabled">
                                    Envoyer la demande
                                </button>
                            </div>
                        @endif
                    </div>
                @endif
            @else
                <div class="vst" style="margin:0">
                    @if ($publication->statut->attendLeClient())
                        Cette publication attend la validation du référent de votre marché.
                    @else
                        {{ $publication->statut->libelleClient() }} — il n'y a rien à décider ici.
                        @if ($publication->lien_publie)
                            <a href="{{ $publication->lien_publie }}" target="_blank" rel="noopener noreferrer">Voir la publication en ligne ↗</a>
                        @endif
                    @endif
                </div>
            @endif
        </div>

        {{-- §D / v4.17.0 §B — LA CONVERSATION : le FIL de discussion, des deux côtés, avec les décisions
             comme événements. Un composant à part : lui seul se rafraîchit, jamais la page. --}}
        {{-- 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="PublicationClient" :sujet-id="$publication->id" lazy="on-load" :key="'fil-pub-'.$publication->id" />
    </section>
</x-espace-client-app.coquille>