{{-- Finestra di invio del link dopo un'assegnazione. Logica nel trait
     App\Livewire\Concerns\InviaLink; la includono Assegna e Il mio gruppo. --}}
{{-- Invio del link (InviaLink::apriInvio): blocca la pagina finché non si
     risponde "inviato / non ancora". Se si chiude la scheda prima,
     l'assegnazione resta segnalata con "link ancora da inviare". --}}
@if($invio)
    @php
        $link = $invio->shortPdfUrl();
        $messaggio = $invio->messaggioLink($link);
    @endphp
    <div class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-gray-900/50 p-4 sm:items-center"
         role="dialog" aria-modal="true" aria-labelledby="invio-titolo" wire:key="invio-{{ $invio->id }}">
        <section class="tm-da-inviare tm-da-inviare-finestra">
            <h2 id="invio-titolo" class="tm-da-inviare-titolo">
                Territorio N° {{ $invio->territorio?->numero }} assegnato a {{ $invio->proclamatore?->nome_completo }}
            </h2>

            @if($link)
                <p class="text-sm text-gray-700 mb-2">Come vuoi mandare il link della piantina? Il destinatario lo scegli tu, tra i tuoi contatti.</p>

                <div class="tm-da-inviare-link">
                    <code id="invio-link" x-data x-on:click="window.getSelection().selectAllChildren($el)">{{ $link }}</code>
                </div>

                {{-- Il messaggio sta in data-messaggio: dentro <x-btn> le direttive
                     Blade (@js) non si compilano, quindi i pulsanti lo leggono da qui. --}}
                <div class="tm-da-inviare-azioni" x-data="{ copiato: false, condivisibile: !! navigator.share }"
                     data-messaggio="{{ $messaggio }}" data-titolo="Territorio N° {{ $invio->territorio?->numero }}">
                    <x-btn :variante="$canaleUsato === 'copia' ? 'primary' : 'secondary'"
                           x-on:click="navigator.clipboard?.writeText(document.getElementById('invio-link').textContent.trim()).then(() => { copiato = true; setTimeout(() => copiato = false, 2000) }).catch(() => {}); $wire.canale('copia')">
                        <span x-show="! copiato">Copia link</span>
                        <span x-show="copiato" x-cloak>Copiato</span>
                    </x-btn>

                    {{-- Condividi: il menu di condivisione del telefono (WhatsApp,
                         Telegram, SMS, posta…), da cui si sceglie app e contatto. Solo
                         dove il browser lo offre. Il canale si annota a condivisione
                         fatta, non se la si annulla. --}}
                    <x-btn :variante="$canaleUsato === 'condividi' ? 'primary' : 'secondary'" x-show="condivisibile" x-cloak
                           x-on:click="const d = $el.closest('[data-messaggio]').dataset; navigator.share({ title: d.titolo, text: d.messaggio }).then(() => $wire.canale('condividi')).catch(() => {})">
                        Condividi…
                    </x-btn>
                </div>

                @if($canaleUsato)
                    <p class="mt-2 text-sm text-gray-700">Canale scelto: {{ \App\Models\Assegnazione::CANALI_LINK[$canaleUsato] }}.</p>
                @endif
                @if($erroreInvio)
                    <p class="mt-2 text-sm text-red-600" role="alert">{{ $erroreInvio }}</p>
                @endif

                <div class="tm-da-inviare-scelta">
                    <p>Hai inviato il link?</p>
                    <div>
                        <x-btn variante="primary" wire:click="concludiInvio(true)" :disabled="$canaleUsato === null"
                               :title="$canaleUsato === null ? 'Scegli prima come mandare il link' : null">Sì, inviato</x-btn>
                        <x-btn variante="secondary" wire:click="concludiInvio(false)">No, non ancora</x-btn>
                    </div>
                </div>
            @else
                <p class="text-sm text-gray-600">
                    Il territorio non ha un PDF: non c'è un link da mandare. Caricalo dalla scheda del territorio.
                </p>
                <div class="tm-da-inviare-scelta">
                    <div>
                        <x-btn variante="secondary" wire:click="concludiInvio(false)">Ho capito</x-btn>
                    </div>
                </div>
            @endif
        </section>
    </div>
@endif