{{-- v4.17.0 §A2.4 — « REMETTRE UN LIVRABLE », écran `data-screen="remettre"` de la maquette. --}}
<x-studio.coquille :espace="$espace" :espaces="$espaces" :badges="$badges" :onglet="$onglet" :titre="$titre" :contexte="$contexte">
    <section class="screen">
        <div class="backbar">
            <a href="{{ $livrable ? route('studio.livrable', ['espace' => $espace->id, 'livrable' => $livrable->id]) : route('studio.livrables', ['espace' => $espace->id]) }}" aria-label="Retour"><x-espace-client-app.icone nom="retour" :taille="18" /></a>
            <span class="bt">{{ $livrable ? 'Nouvelle version' : 'Remettre un livrable' }}</span>
            <span class="chip" style="margin-inline-start:auto">{{ $espace->nomCourtDuClient() }}</span>
        </div>

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

        @if ($livrable)
            <div class="stateline" style="margin:0 0 14px">Version {{ (int) $livrable->version_courante + 1 }} de « {{ $livrable->titre }} » ({{ $livrable->reference }}). La précédente reste consultable ; c'est celle-ci que le client validera.</div>
        @endif

        <form class="form" wire:submit="remettre">
            <div class="field"><label for="liv-titre">Titre <i>*</i></label><input id="liv-titre" class="input" wire:model="saisie.titre" placeholder="Ex. Kakémonos salon — BAT" required @disabled($livrable !== null)></div>

            <div class="field"><label>Famille</label>
                <div class="chips">
                    @foreach ($types as $cle => $libelle)
                        <button type="button" class="{{ ($saisie['type'] ?? '') === $cle ? 'on' : '' }}" wire:click="$set('saisie.type', '{{ $cle }}')" @disabled($livrable !== null)>{{ $libelle }}</button>
                    @endforeach
                </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="pm">Sera remis au client avec cette version</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 — ou un lien de téléchargement</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 de téléchargement">
            </div>

            <div class="field"><label for="liv-message">Message au client</label><textarea id="liv-message" class="input" wire:model="saisie.message" placeholder="Ce qu'il faut regarder, ce qui a changé…"></textarea></div>
            <div class="two">
                <div class="field"><label for="liv-echeance">Échéance</label><input id="liv-echeance" class="input" type="date" wire:model="saisie.echeance" @disabled($livrable !== null)></div>
                <div class="field"><label for="liv-bordereau">Bordereau <small>· facultatif</small></label><input id="liv-bordereau" class="input" wire:model="saisie.bordereau" placeholder="Réf. de transmission"></div>
            </div>
            <p class="help">Réponse souhaitée : {{ (int) ($espace->delai_validation_jours_ouvres ?? 5) }} jours ouvrés après la remise, selon le réglage de l'espace.</p>

            <div class="stick">
                <div class="actrow">
                    @unless ($livrable)
                        <button type="button" class="btn ghost souple" wire:click="enregistrer" wire:loading.attr="disabled">En préparation</button>
                    @endunless
                    <button type="submit" class="btn primary" wire:loading.attr="disabled">Remettre au client</button>
                </div>
            </div>
        </form>
    </section>
</x-studio.coquille>