<x-wireui:modal id="room-sync-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">
                    {{ $branch_name ?? '未選擇' }} 分店中控同步
        </x-slot>
        <div class="grid grid-cols-1 gap-2 mb-4">
            <x-wireui:checkbox id="sync-song" wire:model="syncSong" label="歌曲資料 Song" />
            <x-wireui:checkbox id="sync-favorite" wire:model="syncFavorite" label="收藏資料 Favorite" />
            <x-wireui:checkbox id="sync-text-ads" wire:model="syncTextAds" label="跑馬燈 TextAd" />
            <x-wireui:checkbox id="sync-user" wire:model="syncUser" label="使用者資料 User" />
            <x-wireui:checkbox id="sync-branch" wire:model="syncBranch" label="分店資料 Branch" />
        </div>
        <x-slot name="footer">
            <div class="flex justify-between w-full">
                <x-wireui:button flat label="{{__('branches.cancel')}}" wire:click="closeModal" />
                <x-wireui:button primary label="{{__('branches.submit')}}" wire:click="save" />
            </div>
        </x-slot>
    </x-wireui:card>
</x-wireui:modal>