<div>
    <x-jetstream.dialog-modal wire:model.live="showModal">
        <x-slot name="title">
            {{ $title }}
        </x-slot>

        <x-slot name="content">
            <p>{{ $message }}</p>
        </x-slot>

        <x-slot name="footer">
            <x-jetstream.button wire:click="confirmLogout" wire:loading.attr="disabled">
                <span wire:loading.remove wire:target="confirmLogout">{{ __('OK') }}</span>
                <span wire:loading wire:target="confirmLogout">{{ __('Loading...') }}</span>
            </x-jetstream.button>
        </x-slot>
    </x-jetstream.dialog-modal>

    @push('scripts')
    <script>
        // Listen for custom event from websocket
        window.addEventListener('show-forced-logout-modal', event => {
            @this.call('showForcedLogoutModal', event.detail.message, event.detail.title);
        });

        // Listen for proceed-logout event from Livewire
        window.addEventListener('proceed-logout', () => {
            // Create and submit logout form
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route("logout") }}';

            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';

            form.appendChild(csrfToken);
            document.body.appendChild(form);
            form.submit();
        });
    </script>
    @endpush
</div>
