{{-- @props(['srv_msg' => 'ready']) --}}

<div>


    <div class="border-2 border-gray-700 ">

        <div class="p-2 bg-gray-950" wire:model.live="count">
            {{$count}}
        </div>


        <div class="">
            <div class="p-2" wire:loading>
                <x-button class="p-1 text-gray-900 bg-amber-600 dark:bg-amber-500" :disabled="true">
                    <x-fas-circle-minus class="w-8 h-8 animate-spin" />
                </x-button>
                <x-button class="p-1 text-gray-900 bg-emerald-600 dark:bg-emerald-500" :disabled="true">
                    <x-fas-circle-plus class="w-8 h-8 animate-spin" />
                </x-button>
            </div>

            <div class="p-2" wire:loading.remove>
                <x-button class="p-1 text-gray-900 bg-amber-600 dark:bg-amber-500" :disabled="false"
                    wire:click="decrement">
                    <x-fas-circle-minus class="w-8 h-8" />
                </x-button>
                <x-button class="p-1 text-gray-900 bg-emerald-600 dark:bg-emerald-500" :disabled="false"
                    wire:click="increment">
                    <x-fas-circle-plus class="w-8 h-8" />
                </x-button>
            </div>
        </div>




    </div>




    {{-- <button class="p-2 text-gray-900 bg-amber-600 dark:bg-amber-500" :disabled="false" wire:loading>
        <x-fas-spinner class="w-4 h-4 animate-spin " />
    </button>
    <button class="p-2 text-gray-900 bg-amber-600 dark:bg-amber-500" :disabled="false" wire:loading>
        <x-fas-spinner class="w-4 h-4 animate-spin " />
    </button> --}}

</div>