@props([
'name'  => NULL,
'label' => NULL,
'error' => false,
'type'  => 'text',
'required' => false,
])

<x-form.input-group :name="$name" :label="$label" :error="$error">
    <div class="relative flex items-center" x-data="{
        type: @js($type)
    }">
        <input
            @if(isset($name)) id="{{$name ? "form-input_$name": NULL}}" @endif
            @if(isset($name)) name="{{$name}}" @endif
            @if(isset($name)) x-ref="{{ $name }}" @endif
            :type="type"
            {{ $attributes->merge(['class' => 'form-input']) }}
            @if(isset($value))value="{{ $value }}"@endif
            @if($required)required @endif
        />
        @if(isset($type) && $type === 'password')
            <div class="absolute right-3">
                <x-icon name="show" class="cursor-pointer" @click="type = 'text'" x-show="type === 'password'" />
                <x-icon name="hide" class="cursor-pointer" @click="type = 'password'" x-show="type === 'text'" />
            </div>
        @endif
    </div>
    {!! $slot !!} 
</x-form.input-group>