{{--
    Avvisi galleggianti: raccolgono l'evento "avviso" che i componenti
    Livewire lanciano con il trait Avvisa, e che arriva anche dopo un'azione
    che ridisegna solo il componente.

    sessione: true per mostrare anche i messaggi flash della richiesta (il
    telaio a schermo intero, che non ha una fascia messaggi sua). Il telaio
    normale li mostra già in testa alla pagina, quindi lì resta false.

    Gli avvisi di conferma si chiudono da soli; quelli di errore restano
    finché non li si chiude, perché vanno letti.
--}}
@props(['sessione' => false])

@php
    $iniziali = [];
    if ($sessione && session()->has('success')) {
        $iniziali[] = ['tipo' => 'ok', 'testo' => session('success')];
    }
    if ($sessione && session()->has('error')) {
        $iniziali[] = ['tipo' => 'errore', 'testo' => session('error')];
    }
@endphp

<div class="tm-avvisi" role="status" aria-live="polite"
     x-data="{
        avvisi: [],
        prossimo: 0,
        aggiungi(tipo, testo) {
            const id = ++this.prossimo;
            this.avvisi.push({ id, tipo, testo });
            if (tipo !== 'errore') setTimeout(() => this.togli(id), 4500);
        },
        togli(id) { this.avvisi = this.avvisi.filter(a => a.id !== id); },
     }"
     x-init="@js($iniziali).forEach(a => aggiungi(a.tipo, a.testo))"
     @avviso.window="aggiungi($event.detail.tipo, $event.detail.testo)">
    <template x-for="avviso in avvisi" :key="avviso.id">
        <div class="tm-avviso" :class="avviso.tipo === 'errore' ? 'tm-avviso-errore' : 'tm-avviso-ok'"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-end="opacity-0">
            <svg x-show="avviso.tipo !== 'errore'" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            <svg x-show="avviso.tipo === 'errore'" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <span x-text="avviso.testo"></span>
            <button type="button" @click="togli(avviso.id)" class="tm-avviso-chiudi" aria-label="Chiudi il messaggio">&times;</button>
        </div>
    </template>
</div>