@if(session('success') || session('error') || $errors->any())
<div class="floating-alerts" x-data="{ alerts: [] }" x-init="
    @if(session('success'))
        alerts.push({ type: 'success', msg: '{{ addslashes(session('success')) }}' });
    @endif
    @if(session('error'))
        alerts.push({ type: 'error', msg: '{{ addslashes(session('error')) }}' });
    @endif
    @if($errors->any())
        alerts.push({ type: 'error', msg: '{{ addslashes(implode(' | ', $errors->all())) }}' });
    @endif
    setTimeout(() => alerts = [], 5000);
">
    <template x-for="(alert, i) in alerts" :key="i">
        <div class="floating-alert-item"
             :class="alert.type === 'success' ? 'success' : 'error'">
            <i class="fa-solid shrink-0 text-lg"
               :class="alert.type === 'success' ? 'fa-circle-check' : 'fa-circle-exclamation'"></i>
            <span class="flex-1 text-sm font-bold" x-text="alert.msg"></span>
            <button type="button" @click="alerts.splice(i,1)" class="shrink-0 opacity-60 hover:opacity-100 transition-opacity">
                <i class="fa-solid fa-xmark text-sm"></i>
            </button>
        </div>
    </template>
</div>
@endif