<x-wireui:modal-card title="{{ $userId ? __('users.EditUser') : __('users.CreateNew') }}" blur wire:model.defer="showModal">
    <div class="space-y-4">
        <x-wireui:input label="{{__('users.name')}}" wire:model.defer="fields.name" required />
        <x-wireui:input label="Email" wire:model.defer="fields.email" required />
        <x-wireui:input label="Phone" wire:model.defer="fields.phone" />
        <x-wireui:select
            label="{{__('users.gender')}}"
            wire:model.defer="fields.gender"
            placeholder="{{__('users.select_gender')}}"
            :options="$genderOptions"
            option-label="name"
            option-value="value"
        />
        <x-wireui:select
            label="{{__('users.status')}}"
            wire:model.defer="fields.status"
            placeholder="{{__('users.select_status')}}"
            :options="$statusOptions"
            option-label="name"
            option-value="value"
        />

        <x-wireui:select
            label="{{__('users.role')}}"
            wire:model.defer="selectedRoles"
            placeholder="{{__('users.select_role')}}"
            multiselect
            option-label="label"
            option-value="value"
            :options="$rolesOptions->map(fn($p) => ['value' => $p->id, 'label' => $p->name])->toArray()"
        />
    </div>

    <x-slot name="footer">
        <div class="flex justify-between w-full">
            <x-wireui:button flat label="{{__('users.cancel')}}" wire:click="closeModal"  />
            <x-wireui:button primary label="{{__('users.submit')}}" wire:click="save" />
        </div>
    </x-slot>
</x-wireui:modal-card>