@php
    $fieldWrapperView = $getFieldWrapperView();
    $id = $getId();
    $isDisabled = $isDisabled();
    $isMultiple = $isMultiple();
    $statePath = $getStatePath();
    $areButtonLabelsHidden = $areButtonLabelsHidden();
    $wireModelAttribute = $applyStateBindingModifiers('wire:model');
    $extraInputAttributeBag = $getExtraInputAttributeBag()->class(['fi-fo-toggle-buttons-input']);
@endphp

<x-dynamic-component
    :component="$fieldWrapperView"
    :field="$field"
    tabindex="-1"
    class="fi-fo-toggle-buttons-wrp"
>
    <div
        {{ $getExtraAttributeBag()->class(['fi-fo-toggle-buttons fi-btn-group']) }}
        x-data="{
            pendingValue: null,
            init() {
                const cleanup = Livewire.hook('commit', ({ succeed }) => {
                    succeed(() => { this.pendingValue = null; });
                });
                this.$cleanup = cleanup;
            },
            destroy() {
                if (this.$cleanup) this.$cleanup();
            }
        }"
    >
        @foreach ($getOptions() as $value => $label)
            @php
                $inputId = "{$id}-{$value}";
                $shouldOptionBeDisabled = $isDisabled || $isOptionDisabled($value, $label);
                $color = $getColor($value);
                $icon = $getIcon($value);
            @endphp

            <input
                @disabled($shouldOptionBeDisabled)
                id="{{ $inputId }}"
                @if (! $isMultiple)
                    name="{{ $id }}"
                @endif
                type="{{ $isMultiple ? 'checkbox' : 'radio' }}"
                value="{{ $value }}"
                wire:loading.attr="disabled"
                x-on:change="pendingValue = '{{ $value }}'"
                {{ $wireModelAttribute }}="{{ $statePath }}"
                {{ $extraInputAttributeBag }}
            />

            <x-filament::button
                :color="$color"
                :disabled="$shouldOptionBeDisabled"
                :for="$inputId"
                grouped
                :icon="$icon"
                :label-sr-only="$areButtonLabelsHidden"
                tag="label"
            >
                {{-- Label text: hides only on the clicked button while loading --}}
                <span x-show="pendingValue !== '{{ $value }}'">{{ $label }}</span>

                {{-- Dot-pulse spinner: shows only on the clicked button while loading --}}
                <span x-cloak x-show="pendingValue === '{{ $value }}'" aria-hidden="true">
                    <span style="display:inline-flex;gap:3px;align-items:center;vertical-align:middle">
                        <span style="display:block;width:4px;height:4px;border-radius:50%;background:currentColor;animation:dot-pulse 1.2s ease-in-out infinite;animation-delay:0s"></span>
                        <span style="display:block;width:4px;height:4px;border-radius:50%;background:currentColor;animation:dot-pulse 1.2s ease-in-out infinite;animation-delay:.2s"></span>
                        <span style="display:block;width:4px;height:4px;border-radius:50%;background:currentColor;animation:dot-pulse 1.2s ease-in-out infinite;animation-delay:.4s"></span>
                    </span>
                </span>
            </x-filament::button>
        @endforeach
    </div>
</x-dynamic-component>