@props([
    'index' => ':index',
    'name' => '',
    'label' => $name ?? '',
    'relation' => '',
    'required' => false,
    'value' => null,
    'prepend' => '',
    'append' => '',
    'useLabel' => true,
    'readonly' => false,
    'template' => '',
])
<div class="mb-4">
    <div class="input-group">
        @if(!empty($prepend))
            <span {{ $template }}id="prepend-input-{{ Str::slug($relation . '-' . $name) }}" class="input-group-text bg-dark bg-opacity-10">{{ $prepend }}</span>
        @endif
        <div class="form-floating">
            <input {{ $attributes->class(['form-control', 'is-invalid' => $errors->has("$relation.$index.$name")]) }} {{ $template }}id="input-{{ Str::slug($relation . '-' . $name) }}" type="text" {{ $template }}name="{{ $relation }}[{{ $index }}][{{ $name }}]" value="{{ old($name, $value) }}" {{ $readonly ? 'readonly tabindex=-1' : '' }} @required($required) />
            <label class="form-label">{{ $label }}</label>
        </div>
        @if(!empty($append))
            <span {{ $template }}id="append-input-{{ Str::slug($relation . '-' . $name) }}" class="input-group-text bg-dark bg-opacity-10">{{ $append }}</span>
        @endif
    </div>
    @error("$relation.$index.$name")
    <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>