@props([
    'id',
    'name',
    'type' => 'text',
    'value' => '',
    'required' => false,
    'autocomplete' => '',
    'placeholder' => '',
    'mask' => '',
    'icon' => '',
])

<div class="form-icon-container">
    <input
        {{ $attributes->merge(['class' => 'form-control form-icon-input', 'id' => $id, 'type' => $type, 'name' => $name, 'value' => $value, 'required' => $required, 'autocomplete' => $autocomplete, 'placeholder' => $placeholder]) }}
        x-data x-ref="input"
        @if ($mask) x-init="Inputmask({ 'mask': '{{ $mask }}' }).mask($refs.input);" @endif
        x-cloak>
    @if ($icon)
        <span class="fas {{ $icon }} text-body fs-9 form-icon"></span>
    @endif
    <x-input-error :field="$name" />
    @if ($type == 'password')
        <button type="button" class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary"
            x-data="{ show: false }" @click="show = !show" x-cloak>
            <span :class="show ? 'uil uil-eye-slash' : 'uil uil-eye'"></span>
        </button>
    @endif
</div>