@props([
    'name',
    'label' => null,
    'type' => 'text',
    'value' => null,
    'required' => false,
    'help' => null,
    'placeholder' => null,
    // A bootstrap-icons name, rendered inside the control. Optional: every
    // existing caller omits it and gets exactly the markup it had before.
    'icon' => null,
    // Lets a caller close up the last row in a card without a wrapper div.
    'spacing' => 'mb-3',
])

@php
    $id = $attributes->get('id', 'field-'.$name);
    $hasError = $errors->has($name);
@endphp

<div class="{{ $spacing }}">
    @if ($label)
        <label for="{{ $id }}" class="form-label">
            {{ $label }}
            @if ($required)<span class="text-danger" aria-hidden="true">*</span>@endif
        </label>
    @endif

    <div class="clinic-field @if ($icon) clinic-field--icon @endif">
        @if ($icon)
            <i class="bi bi-{{ $icon }} clinic-field__icon" aria-hidden="true"></i>
        @endif

        <input
            type="{{ $type }}"
            name="{{ $name }}"
            id="{{ $id }}"
            value="{{ old($name, $value) }}"
            @if ($required) required aria-required="true" @endif
            @if ($placeholder) placeholder="{{ $placeholder }}" @endif
            @if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
            {{ $attributes->merge(['class' => 'form-control'.($hasError ? ' is-invalid' : '')]) }}
        >
    </div>

    @if ($help)
        <div class="form-text">{{ $help }}</div>
    @endif

    {{--
        `d-block` because the input now sits inside .clinic-field, so Bootstrap's
        `.is-invalid ~ .invalid-feedback` sibling rule no longer matches. The
        block is only rendered when there is an error, so forcing it visible
        changes nothing else.
    --}}
    @error($name)
        <div class="invalid-feedback d-block" id="{{ $id }}-error">{{ $message }}</div>
    @enderror
</div>