<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>