<div>
    @can('clients.handlers.manage')
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="fw-bold mb-0">Handlers</h4>
            </div>

            <div class="row">
                @foreach($handlerTypes as $type)
                    <div class="col-md-12 mb-3">
                        <div class="form-group row">
                            <label class="form-label col-md-6 fw-bold">
                                {{ $type->display_name }}
                                @if($type->description)
                                    <i class="mdi mdi-help-circle-outline text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ $type->description }}"></i>
                                @endif
                            </label>

                            <div class="col-md-6">
                                <select wire:model="selectedHandlers.{{ $type->id }}" class="form-select">
                                    <option value="">-- Unassigned --</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name_first }} {{ $user->name_last }}</option>
                                    @endforeach
                                </select>

                                @error("selectedHandlers.{$type->id}")
                                <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card-footer d-flex justify-content-between align-items-center bg-light">
            <x-ui.button wire:click="save">Save</x-ui.button>
        </div>
    </div>
    @endcan
</div>