<x-wireui:modal id="room-detail-modal"  wire:model.defer="showModal" persistent>
    <x-wireui:card class="border border-gray-200">
        <x-slot name="action">
            <button class="cursor-pointer p-1 rounded-full focus:outline-none focus:outline-hidden focus:ring-2 focus:ring-secondary-200 text-secondary-300"
                    wire:click="closeModal"
                    tabindex="-1"
                >
                    <x-dynamic-component
                        :component="WireUi::component('icon')"
                        name="x-mark"
                        class="w-5 h-5"
                    />
                </button>
        </x-slot>
        <x-slot name="title">
                    {{ $room_name ?? '未選擇' }}包廂設定
        </x-slot>
        <div class="grid grid-cols-3 gap-4 mb-4">
            <x-wireui:button wire:click="startNotify" >開機</x-wireui:button>
            <x-wireui:button wire:click="stopNotify" >關機</x-wireui:button>
            <x-wireui:button wire:click="fireNotify" >火災</x-wireui:button>
        </div>
        <div class="grid grid-cols-2 gap-4 mb-4">
            <x-wireui:button wire:click="openAccountNotify" >包廂開帳</x-wireui:button>
            <x-wireui:button wire:click="closeAccountNotify" >包廂關帳</x-wireui:button>
        </div>
        
    </x-wireui:card>
</x-wireui:modal>