{{-- v4.17.0 §A2.5 — LES DOCUMENTS (agence), écran `data-screen="documents"` de la maquette : par
     famille, le plus récent en haut, « Vu / Non vu » par le client. --}}
<x-studio.coquille :espace="$espace" :espaces="$espaces" :badges="$badges" :onglet="$onglet" :titre="$titre" :contexte="$contexte">
    <section class="screen">
        <h1 class="h1">Documents</h1>
        <p class="sub">{{ $espace->nomCourtDuClient() }} · ce que nous partageons, par famille.</p>

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

        <div class="cta"><button type="button" class="btn primary wide" wire:click="basculerLeFormulaire"><x-espace-client-app.icone nom="plus" :taille="16" /> Partager un document</button></div>

        @if ($formulaireOuvert || request()->boolean('partager'))
            <form class="form" wire:submit="partager" style="margin-bottom:18px">
                <div class="field"><label for="doc-titre">Titre <i>*</i></label><input id="doc-titre" class="input" wire:model="saisie.titre" required placeholder="Ex. Ordre de service n° 2"></div>
                <div class="two">
                    <div class="field"><label for="doc-famille">Famille</label>
                        <select id="doc-famille" class="input" wire:model="saisie.famille">
                            @foreach ($choixFamilles as $famille)<option value="{{ $famille->value }}">{{ $famille->label() }}</option>@endforeach
                        </select>
                    </div>
                    <div class="field"><label for="doc-vis">Visibilité</label>
                        <select id="doc-vis" class="input" wire:model="saisie.visibilite">
                            <option value="partage">Partagé avec le client</option>
                            <option value="interne">Interne (le client n'en sait rien)</option>
                        </select>
                    </div>
                </div>
                <div class="field"><label>Fichier ou lien <i>*</i></label>
                    @if ($nomDuFichier)
                        <div class="preview">
                            <span class="pv"><x-espace-client-app.icone nom="documents" :taille="26" /></span>
                            <span class="pb"><span class="pn">{{ $nomDuFichier }}</span><span class="pacts"><label>Remplacer<input type="file" wire:model="fichier"></label><button type="button" class="rm" wire:click="retirerLeFichier">Retirer</button></span></span>
                        </div>
                    @else
                        <div class="drop">
                            <span class="dic"><x-espace-client-app.icone nom="depot" :taille="22" /></span>
                            <span class="dt">Déposer le fichier</span>
                            <span class="dm">PDF, image, vidéo, ZIP ou Office · jusqu'à 50 Mo</span>
                            <span class="dacts"><label class="btn primary">Choisir un fichier<input type="file" wire:model="fichier" aria-label="Choisir un fichier"></label></span>
                        </div>
                    @endif
                    <div wire:loading wire:target="fichier" class="help" style="margin-top:8px">Envoi du fichier…</div>
                    @error('fichier') <div class="alerte mauvais" style="margin-top:8px">{{ $message }}</div> @enderror
                    <input class="input" style="margin-top:8px" type="url" wire:model="saisie.lien" placeholder="ou un lien (Drive, WeTransfer…)" aria-label="Lien">
                </div>
                <div class="actrow">
                    <button type="button" class="btn ghost" wire:click="basculerLeFormulaire">Fermer</button>
                    <button type="submit" class="btn primary" wire:loading.attr="disabled">Partager</button>
                </div>
            </form>
        @endif

        @forelse ($familles as $famille)
            <p class="slabel" @if ($loop->first) style="margin-top:4px" @endif>{{ $famille['titre'] }} <span class="cnt">{{ count($famille['lignes']) }}</span></p>
            <div class="list">
                @foreach ($famille['lignes'] as $ligne)
                    @if ($ligne['url'])
                        <a class="rowc" href="{{ $ligne['url'] }}" target="_blank" rel="noopener noreferrer">
                    @else
                        <div class="rowc">
                    @endif
                        <span class="fic"><x-espace-client-app.icone nom="documents" :taille="18" /></span>
                        <span class="body"><span class="nm">{{ $ligne['titre'] }}</span><span class="mt">{{ $ligne['detail'] }}</span></span>
                        @if (! $ligne['partage'])
                            <span class="pill prep">Interne</span>
                        @elseif ($ligne['vu'])
                            <span class="pill ok">Vu</span>
                        @else
                            <span class="pill prep">Non vu</span>
                        @endif
                    @if ($ligne['url'])</a>@else</div>@endif
                @endforeach
            </div>
        @empty
            <div class="vide">Aucun document pour cet espace. Partagez le premier : le client en sera prévenu.</div>
        @endforelse
    </section>
</x-studio.coquille>