@php
    $selectedIds = array_values(array_unique(array_map('intval', $selectedIds ?? [])));
    $startDisabled = $startDisabled ?? false;
    $accionesById = isset($acciones) ? $acciones->keyBy('id') : collect();
@endphp

<label class="form-label text-muted small mb-1">
    Acciones vinculadas
    <span class="text-muted fw-normal">(opcional)</span>
</label>

<div class="position-relative">
    <div class="input-group">
        <span class="input-group-text bg-white border-end-0">
            <i class="bi bi-search text-muted"></i>
        </span>
        <input type="text" id="accion_search" class="form-control border-start-0" placeholder="Buscar acción del plan..."
            autocomplete="off" {{ $startDisabled ? 'disabled' : '' }}>
    </div>
    <div id="accion_dropdown" class="list-group position-absolute w-100 d-none shadow"
        style="z-index:200; max-height:220px; overflow-y:auto; top:calc(100% + 4px); left:0;">
    </div>
</div>

<div id="acciones_chips" class="mt-2 d-flex flex-wrap gap-2">
    @foreach ($selectedIds as $sid)
        @php $accion = $accionesById->get($sid) @endphp
        @if ($accion)
            <span
                class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-normal d-inline-flex align-items-center gap-2"
                data-id="{{ $accion->id }}">
                <i class="bi bi-list-task"></i>
                {{ $accion->detalle_accion }}
                <button type="button" class="btn-close ms-1" style="font-size:.55rem;" aria-label="Quitar"></button>
            </span>
            <input type="hidden" name="accion_ids[]" id="_hidden_accion_ids[]_{{ $accion->id }}"
                value="{{ $accion->id }}">
        @endif
    @endforeach
</div>

<div id="accion_sin_resultados" class="text-muted small mt-1 d-none">
    No hay acciones disponibles para esta unidad.
</div>