@props([
    'label' => null,
    'placeholder' => '',
    'direction' => '',
    'defer' => true,
    'inputClass' => ''
])

<x-ui.form-group :label="$label" :direction="$direction">
    <div x-data="alpineDatepicker(@entangle($attributes->wire('model')){{ $defer? '.defer' : '' }})" class="form-control-wrap">
        <div class="form-icon form-icon-left">
            <x-ui.nicon name="calendar"/>
        </div>
        <input type="text" 
            x-ref="datepicker"
            x-model="value"
            class="form-control form-control-solid cursor-pointer {{ $inputClass }} @error($attributes->wire('model')?->value) is-invalid @enderror"
            placeholder="{{ $placeholder }}"
            readonly
        >
        @error($attributes->wire('model')?->value) <span class="invalid">{{ $message }}</span> @enderror
    </div>
</x-ui.form-group>