@props([
    'detail' => [],
    'services' => [],
    'index' => ':index',
    'width' => '320px',
    'readonly' => false,
    'template' => empty($detail) ? 'data-template-' : '',
])
<div class="position-relative">
    <div class="input-group" style="min-width: {{ $width }};">
        @if(!$readonly)
            <button type="button" class="btn btn-primary" {{ $template }}id="btn-select-service{{ $index }}" data-index="{{ $index }}">
                <i class="fa fa-search"></i>
            </button>
        @endif
        <input {{ $attributes->class(['form-control', 'is-invalid' => $errors->has("details.$index.description")]) }} type="text" {{ $template }}id="details-description{{ $index }}" {{ $template }}name="details[{{ $index }}][description]" value="{{ ($detail['description'] ?? '') }}" data-index="{{ $index }}" readonly>
    </div>
    @if($readonly)
        <x-details.input-hidden :detail="$detail" :index="$index" name="service_id" />
    @else
        <div class="invisible position-absolute top-0 start-0" style="min-width: {{ $width }};">
            <x-details.select-service :detail="$detail" :index="$index" :services="$services" name="service_id" relation="details" :selected="$detail['service_id'] ?? ''" />
        </div>
    @endif
</div>