@php use App\Helpers\FormHelper; @endphp

<div>
    <div x-data="{ learner: @entangle('learner') }" class="d-flex justify-content-end">
        <div class="col-3 m-0">
            <select x-init="initSelectPicker()" name="learner" class="form-control form-control-sm selectpicker @error('learner') is-invalid @enderror" aria-label="Learner"
                    data-dropup-auto="false" data-live-search="true" title="{{ __('pages.learners') }}"
                    data-width="100%" data-live-search-normalize="true" data-virtual-scroll="false"
                    data-size="4" wire:model="learner" multiple>
                {!! FormHelper::generateSelectOptions($this->learners, 'id', 'name', '', function ($learner) {
                        $learner->name = "$learner->first_name $learner->last_name";
                        return $learner;
                    })
                !!}
            </select>
            <div class="invalid-feedback">{{ $errors->first('learner') ?? '' }}</div>
        </div>
        <div class="ms-2">
            <button wire:click.prevent="assignLearner" class="btn btn-primary btn-sm p-2" href="#" role="button"
                    :disabled="!learner">+ {{ __('pages.add') }}</button>
        </div>
    </div>
    @if(count($this->assignedLearners))
        <ol style="max-height: 12rem; overflow-y: scroll" class="list-group list-group-numbered mt-3">
            @foreach($this->assignedLearners as $learner)
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <div class="ms-2 me-auto">
                        <div class="fw-bold">{{ $learner->data->first_name }} {{ $learner->data->last_name }}</div>
                    </div>
                    <a wire:click.prevent="detachLearner({{ $learner->id }})" href="#" class="text-danger font-weight-bold text-xs m-2">
                        <i class="far fa-trash-alt"></i>
                        {{ __('pages.delete') }}
                    </a>
                </li>
            @endforeach
        </ol>
    @else
        <p class="text-center pt-4">Nu exista cursanti</p>
    @endif
</div>