<div>
    <span class="setel-users-filter-label" id="coord-day-tech-label">Técnico</span>
    <p class="mt-0.5 text-xs text-[var(--setel-text-muted)]">Busque por nombre, documento o correo (mismo buscador que en la ficha de OT).</p>
    @if ($this->coordinatorSelectedTechnician)
        <div class="setel-picker-chip-row mt-2">
            <span class="setel-picker-chip" aria-live="polite">{{ $this->coordinatorSelectedTechnician->fullName() }}</span>
            <button type="button" class="setel-picker-chip-clear" wire:click="clearTechnicianSelection">Quitar</button>
        </div>
    @endif
    <div class="setel-combobox mt-2" wire:click.outside="closeTechnicianPicker">
        <div class="setel-input-icon-wrap isolate w-full">
            <span class="setel-input-icon" aria-hidden="true"><flux:icon.search class="size-5 shrink-0" /></span>
            <input
                id="coord-day-tech-search"
                type="search"
                class="setel-input setel-input--has-icon"
                wire:model.live.debounce.300ms="pickerTechnicianQuery"
                wire:focus="openTechnicianPicker"
                wire:keydown.escape="closeTechnicianPicker"
                placeholder="Nombre, documento o correo…"
                autocomplete="off"
                aria-labelledby="coord-day-tech-label"
                aria-expanded="{{ $pickerTechnicianOpen ? 'true' : 'false' }}"
                aria-controls="coord-day-tech-listbox"
                @disabled(! $this->withinOperationsWindow)
            />
        </div>
        @if ($pickerTechnicianOpen)
            <div id="coord-day-tech-listbox" class="setel-combobox-panel" role="listbox" aria-label="Técnicos">
                @if ($this->technicianPickerResults->isEmpty())
                    <p class="setel-combobox-empty">No hay técnicos que coincidan.</p>
                @else
                    <ul class="setel-combobox-list">
                        @foreach ($this->technicianPickerResults as $user)
                            <li role="none">
                                <button
                                    type="button"
                                    class="setel-combobox-option text-start"
                                    wire:key="coord-day-tech-opt-{{ $user->id }}"
                                    wire:click="selectTechnicianUser({{ $user->id }})"
                                    role="option"
                                >
                                    <span class="font-medium text-[var(--setel-text)]">{{ $user->fullName() }}</span>
                                    @if ($user->document || $user->email)
                                        <span class="mt-0.5 block text-xs text-[var(--setel-text-muted)]">{{ $user->document }} @if ($user->document && $user->email) · @endif {{ $user->email }}</span>
                                    @endif
                                </button>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        @endif
    </div>
    @error('form.technician_id')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>
