{{-- <div class="w-flex">
    <div class="container mx-auto flex px-5 py-5 md:flex-row flex-col  items-start">
        <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0 flex flex-col ">
            <div class="relative  mb-6 w-full group">
                <div class="relative p-1 flex items-center justify-start w-full  mr-4 sm:mr-0 sm:right-auto"> --}}
                    <div class="flex items-center">
                    <div class="relative" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false">
                        @if (!$readonly)
                            <div @click="open = ! open">
                                <span class="inline-flex rounded-md">
                                    <button type="button" class="flex text-left items-center justify-between p-4 sm:h-full sm:w-52 lg:h-full lg:w-80 sm:h-14 px-3 py-2 border text-sm leading-4 font-medium rounded-md text-gray-700 bg-gray-200 hover:text-gray-900 hover:bg-gray-400 dark:text-gray-300 dark:bg-gray-700 dark:hover:text-white dark:hover:bg-gray-500 focus:outline-none transition">
                                        @lang('messages.Select by ') @lang('messages.Job Description')
                                        <svg class="ml-2 -mr-0.5 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                        </svg>
                                    </button>
                                </span>
                            </div>
                        @endif

                        <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute z-50 mt-2 w-60 shadow-lg origin-top-left left-0 overflow-auto	max-h-96 h-fit"  style="display: none;">
                            <div class="ring-1 ring-black ring-opacity-5">
                                <ul class="w-full text-sm font-medium text-gray-900 bg-white border border-gray-400 dark:border-gray-200">
                                    @if($job_descriptions)
                                        @foreach ($job_descriptions as $job_description)
                                            <li class="w-full border-b border-gray-400 dark:border-gray-200 medium text-gray-700 bg-gray-200 hover:text-gray-900 hover:bg-gray-400 dark:text-gray-300 dark:bg-gray-700 dark:hover:text-white dark:hover:bg-gray-500 focus:outline-none transition">
                                                <div class="flex items-center pl-3">
                                                    <input x-on:click="$wire.getAllUsersWithFilter({{$job_description->id}})"
                                                            type="checkbox"
                                                            value="{{$job_description->id}}"
                                                            id="job_desc_id_{{ $job_description->id }}"
{{--                                                                    value="{{$job_description->job_users->pluck('id')}}"--}}
                                                            wire:model="job_descriptions_attach" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
                                                    <label for="job_desc_id_{{ $job_description->id }}" class="py-3 ml-2 w-full text-sm font-medium ">{!! $job_description->name !!}</label>
                                                </div>
                                            </li>
                                        @endforeach
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                    </div>
                {{-- </div>
            </div>
        </div>
    </div>
</div> --}}