@props([
    'label' => null,
    'name',                 // wire:model path, also the error key (e.g. form.email)
    'id' => null,
    'type' => 'text',
    'required' => false,
    'hint' => null,
    'live' => false,        // true => wire:model.live.debounce
    'blur' => false,        // true => wire:model.blur
    'prefix' => null,       // e.g. "$"
])

@php
    $id ??= str_replace('.', '-', $name);
    $invalid = $errors->has($name);
    $model = $live ? 'wire:model.live.debounce.400ms' : ($blur ? 'wire:model.blur' : 'wire:model');
@endphp

<x-ui.field :label="$label" :for="$id" :name="$name" :required="$required" :hint="$hint" {{ $attributes->only('class') }}>
    <div class="relative">
        @if ($prefix)
            <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-sm text-slate-500">{{ $prefix }}</span>
        @endif
        <input
            id="{{ $id }}"
            type="{{ $type }}"
            {{ $model }}="{{ $name }}"
            @if ($required) required aria-required="true" @endif
            aria-invalid="{{ $invalid ? 'true' : 'false' }}"
            @if ($invalid) aria-describedby="{{ $id }}-error" @elseif ($hint) aria-describedby="{{ $id }}-hint" @endif
            {{ $attributes->except('class')->class(['form-control', 'pl-7' => $prefix]) }}
        >
    </div>
</x-ui.field>