<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<div
class="flex items-center justify-between w-full px-3 py-2 text-sm text-gray-900 bg-white border border-gray-300 rounded-lg cursor-pointer"
@click="$dispatch('open-modal', { id: 'job-category-select-modal' })"
>
{{ $getSelectedCategoryName() ?? 'Select Job Category' }}
<x-heroicon-m-chevron-down class="w-5 h-5 text-gray-600" />
</div>
<x-filament::modal id="job-category-select-modal" width="lg">
<x-slot name="heading">
{{ $getSelectModalHeadingContent() }}
</x-slot>
<livewire:filament.categories.job-category-selection
wire:model.live="{{ $getStatePath() }}"
:modelId="$getModelId()"
:modelType="$getModelType()"
:isMultiple="$isMultiple()"
:key="'job-category-selection'"
/>
</x-filament::modal>
</x-dynamic-component>
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<div
class="flex items-center justify-between w-full px-3 py-2 text-sm text-gray-900 bg-white border border-gray-300 rounded-lg cursor-pointer"
@click="$dispatch('open-modal', { id: 'job-category-select-modal' })"
>
{{ $getSelectedCategoryName() ?? 'Select Job Category' }}
<x-heroicon-m-chevron-down class="w-5 h-5 text-gray-600" />
</div>
<x-filament::modal id="job-category-select-modal" width="lg">
<x-slot name="heading">
{{ $getSelectModalHeadingContent() }}
</x-slot>
<livewire:filament.categories.job-category-selection
wire:model.live="{{ $getStatePath() }}"
:modelId="$getModelId()"
:modelType="$getModelType()"
:isMultiple="$isMultiple()"
:key="'job-category-selection'"
/>
</x-filament::modal>
</x-dynamic-component>