{{-- resources/views/forms/components/small-cards.blade.php --}}
<x-dynamic-component
	:component="$getFieldWrapperView()"
	:id="$getId()"
	:label="$getLabel()"
	:label-sr-only="$isLabelHidden()"
	:helper-text="$getHelperText()"
	:hint="$getHint()"
	:hint-action="$getHintAction()"
	:hint-color="$getHintColor()"
	:hint-icon="$getHintIcon()"
	:required="$isRequired()"
	:state-path="$getStatePath()"
>
	<div x-data="{ state: $wire.entangle('{{ $getStatePath() }}').defer }">
		<!-- Interact with the `state` property in Alpine.js -->
		<div>
			<fieldset class="mt-2">
				<legend class="sr-only">Choose {{ $getName() }} option</legend>
				<div class="grid grid-cols-3 gap-3 sm:grid-cols-6">
				@foreach($getOptions() as $key => $option)
					<div 
						@click="state = '{{ $key }}'"
						class="transition-all duration-150 dark:border-primary-500 cursor-pointer flex rounded-lg p-2 justify-center items-center"
						x-bind:class="{
							'dark:bg-primary-600 bg-gray-900 dark:border-none': state === '{{ $key }}',
							'border border-2 hover:border-gray-900 dark:hover:bg-white border-gray-900': state !== '{{ $key }}',
						}"
					>
						<span
							class="transition-all duration-150 dark:text-primary-500 flex items-center justify-center"
							x-bind:class="{
								'text-white dark:text-white': state === '{{ $key }}',
							}"
						> 
							<x-dynamic-component
								:component="$option['icon']"
								class="w-4 h-4"
							/>
							<span>
								&nbsp;
								{{ $option['label'] }}
							</span>
						</span>
					</div>
				@endforeach
				</div>
			</fieldset>
		</div>
	</div>
</x-dynamic-component>