@props([
    'conversion' => [],
    'index' => ':index',
    'template' => empty($conversion) ? 'data-template-' : '',
])
<div class="mb-4">
    <div class="d-sm-flex text-center">
        <div {{ $template }}id="input-autocomplete-unit{{ $index }}" class="form-floating">
            <input {{ $attributes->class(['form-control input-autocomplete-unit', 'is-invalid' => $errors->has("conversions.$index.unit")]) }} type="text" placeholder="{{ __('validation.attributes.unit') }}" {{ $template }}id="input-conversions-unit{{ $index }}" {{ $template }}name="conversions[{{ $index }}][unit]" value="{{ $conversion['unit'] ?? '' }}" />
            <label class="form-label">{{ __('general.one') }}</label>
            @error("conversions.$index.unit")
            <div class="invalid-feedback d-block">
                {{ $message }}
            </div>
            @enderror
        </div>
        <span class="h5 px-1 m-0 align-self-center">=</span>
        <div>
            <div class="input-group">
                <div class="form-floating">
                    <input type="text" {{ $attributes->class(['form-control inputmask-numeric', 'is-invalid' => $errors->has("conversions.$index.ratio")]) }} {{ $template }}id="input-conversions-ratio{{ $index }}" {{ $template }}name="conversions[{{ $index }}][ratio]" value="{{ $conversion['ratio'] ?? '1' }}">
                </div>
                <span class="input-group-text span-base-unit px-2"></span>
            </div>
            @error("conversions.$index.ratio")
            <div class="invalid-feedback d-block">
                {{ $message }}
            </div>
            @enderror
        </div>
    </div>
</div>