{{-- v4.17.0 §A2.6 — LES DEMANDES, écran `data-screen="demandes"` de la maquette : sans réponse →
     en cours → closes. Répondre et clore, sans quitter l'app. --}}
<x-studio.coquille :espace="$espace" :espaces="$espaces" :badges="$badges" :onglet="$onglet" :titre="$titre" :contexte="$contexte">
    <section class="screen">
        <h1 class="h1">Demandes</h1>
        <p class="sub">{{ $espace ? $espace->nomCourtDuClient().' · c' : 'C' }}e que les clients nous écrivent — sans réponse d'abord.</p>

        @if ($annonce)
            <div class="alerte {{ $annonce['ton'] }}" role="status">{{ $annonce['texte'] }}</div>
        @endif

        @foreach ([['Sans réponse', $sans_reponse, true, 'warn', 'À répondre'], ['En cours', $en_cours, false, 'acc', 'Répondu'], ['Closes', $closes, false, 'ok', 'Close']] as [$titreGroupe, $liste, $attente, $ton, $mot])
            @if ($liste->isNotEmpty())
                <p class="slabel">@if ($attente)● @endif{{ $titreGroupe }} <span class="cnt">{{ $liste->count() }}</span></p>
                <div class="list">
                    @foreach ($liste as $demande)
                        @php($auteur = \Illuminate\Support\Str::of((string) $demande->corps)->match('/^(.+?) vous écrit depuis/mu')->toString() ?: $demande->dashboard?->nomCourtDuClient())
                        <div class="req" wire:key="demande-{{ $demande->id }}">
                            <span class="rav" aria-hidden="true">{{ \App\Support\EspaceClient\AppClient::initiales($demande->dashboard?->nomCourtDuClient()) }}</span>
                            <div class="rb">
                                <div class="rn">{{ $auteur }} · {{ $demande->dashboard?->nomCourtDuClient() }} <span class="espt">{{ \App\Livewire\EspaceClient\App\Cloche::dateRelative($demande->envoye_le) }}</span></div>
                                <div class="rt {{ $ouverte === $demande->id ? '' : 'court' }}">{{ \Illuminate\Support\Str::after((string) $demande->sujet, 'Message du client — ') }}
{{ $demande->texteDuClient() }}</div>
                                <div class="rm">
                                    <span class="pill {{ $ton }}">{{ $mot }}</span>
                                    @if ($demande->repondu_le) Répondu le {{ $demande->repondu_le->format('d/m') }} @endif
                                    @if ($demande->clos_le) · réglé le {{ $demande->clos_le->format('d/m') }} @endif
                                    @if ($demande->clos_le === null)
                                        <button type="button" class="relance" wire:click="ouvrir({{ $demande->id }})">{{ $ouverte === $demande->id ? 'Fermer' : 'Répondre' }}</button>
                                        <button type="button" class="relance" wire:click="clore({{ $demande->id }})" wire:loading.attr="disabled">Clore</button>
                                    @endif
                                </div>
                            </div>
                            @if ($ouverte === $demande->id)
                                <div class="reponse">
                                    <label class="hide" for="reponse-{{ $demande->id }}">Votre réponse</label>
                                    <textarea id="reponse-{{ $demande->id }}" class="input" wire:model="reponse" placeholder="Votre réponse — elle part par e-mail à {{ $demande->adresseDeReponse() ?? 'l\'adresse laissée par le client' }}, avec les gestionnaires en copie."></textarea>
                                    <div class="actrow">
                                        <button type="button" class="btn primary" wire:click="repondre({{ $demande->id }})" wire:loading.attr="disabled">Envoyer la réponse</button>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        @endforeach

        @if ($sans_reponse->isEmpty() && $en_cours->isEmpty() && $closes->isEmpty())
            <div class="vide">Aucune demande pour le moment. Les messages « Nous écrire » des clients arriveront ici.</div>
        @endif
    </section>
</x-studio.coquille>