{{--
    Seletor múltiplo com busca e chips removíveis (escopos organizacionais).

    Variáveis esperadas:
      $selectorId    → prefixo único (ex.: scope_structures)
      $inputName     → nome do campo no formulário (ex.: scope_structures[])
      $label         → rótulo do campo
      $helpText       → texto de ajuda
      $placeholder    → placeholder da busca
      $dataset        → array de { id, label, subtitle?, search }
      $selectedIds    → array de IDs já selecionados
      $errorKey        → chave para @error (ex.: scope_structures)
--}}
@php
    $selectedIds = $selectedIds ?? [];
    $dataset     = $dataset ?? [];
    $selectedItems = collect($dataset)->whereIn('id', $selectedIds);
    $datasetJson = json_encode(array_values($dataset));
@endphp

<div class="mb-0" id="{{ $selectorId }}-selector" data-multi-scope-selector data-input-name="{{ $inputName }}">

    <label class="form-label fw-semibold" for="{{ $selectorId }}-search">
        {{ $label }}
    </label>

    <div class="border rounded p-2 mb-2 bg-light"
         aria-label="{{ __('Selecionados') }}">
        <small class="text-muted d-block mb-1 fw-semibold">
            {{ __('Selecionados:') }}
        </small>
        <div class="multi-scope-chips d-flex flex-wrap gap-1">
            @foreach($selectedItems as $item)
                <span class="badge bg-primary d-inline-flex align-items-center gap-1 py-2 px-2 fs-6"
                      data-item-id="{{ $item['id'] }}"
                      title="{{ $item['label'] }}">
                    <span>{{ $item['label'] }}</span>
                    <button type="button"
                            class="btn-close btn-close-white ms-1"
                            style="font-size:0.55rem"
                            data-action="remove-scope-item"
                            data-id="{{ $item['id'] }}"
                            aria-label="{{ __('Remover') }}"></button>
                </span>
            @endforeach
        </div>
        <span class="multi-scope-empty-msg text-muted fst-italic small {{ $selectedItems->isNotEmpty() ? 'd-none' : '' }}">
            {{ __('Nenhum item selecionado.') }}
        </span>
    </div>

    <div class="input-group mb-1">
        <span class="input-group-text" aria-hidden="true">
            <i class="fa-solid fa-magnifying-glass"></i>
        </span>
        <input type="text"
               id="{{ $selectorId }}-search"
               class="form-control multi-scope-search"
               placeholder="{{ $placeholder }}"
               autocomplete="off"
               aria-label="{{ $placeholder }}">
    </div>

    <div class="multi-scope-resultados list-group d-none"
         style="max-height: 260px; overflow-y: auto;"
         aria-live="polite"
         aria-label="{{ __('Resultados da busca') }}">
    </div>

    <div id="{{ $selectorId }}_help" class="form-text">{{ $helpText }}</div>

    @error($errorKey)
        <div class="text-danger small mt-1">{{ $message }}</div>
    @enderror
    @error($errorKey . '.*')
        <div class="text-danger small mt-1">{{ $message }}</div>
    @enderror

    <div class="multi-scope-hidden-inputs" aria-hidden="true">
        @foreach($selectedIds as $id)
            <input type="hidden" name="{{ $inputName }}" value="{{ $id }}" data-id="{{ $id }}">
        @endforeach
    </div>

    <script type="application/json" class="multi-scope-dataset">{!! $datasetJson !!}</script>

</div>