@props([
    'teams' => null,
])
<x-jet-dialog-modal wire:model="modalSearchVisible" max-width="2xl">
    <x-slot name="title">{{ __('saas_search_actor') }}</x-slot>

    <x-slot name="content">
        <div class="flex flex-wrap -mx-3">
            <div class="mt-5 w-full md:w-1/2 px-3">
                <x-jet-label for="last_name" :value="__('label_last_name')" />
                <x-jet-input type="text" id="search_text" wire:model.defer="criteriasSearch.last_name" :placeholder="__('placeholder_search_last_name')" />
            </div>
            <div class="mt-5 w-full md:w-1/2 px-3">
                <x-jet-label for="first_name" :value="__('label_first_name')" />
                <x-jet-input type="text" id="search_text" wire:model.defer="criteriasSearch.first_name" :placeholder="__('placeholder_search_first_name')" />
            </div>
        </div>
        <div class="flex flex-wrap -mx-3 mb-2">
            <div class="mt-5 w-full md:w-1/2 px-3">
                <x-jet-label for="email" :value="__('label_email')" />
                <x-jet-input type="text" id="search_text" wire:model.defer="criteriasSearch.email" :placeholder="__('placeholder_search_email')" />
            </div>
            <div class="mt-5 w-full md:w-1/2 px-3">
                <x-jet-label for="phone" :value="__('label_phone')" />
                <x-jet-input type="text" id="search_text" wire:model.defer="criteriasSearch.phone" :placeholder="__('placeholder_search_phone')" />
            </div>
        </div>
        @if(!empty($teams)) 
            <div class="mt-5 mb-2 w-full">
                <x-jet-label for="team_id" :value="__('label_search_project')" />
                <select wire:model.defer="criteriasSearch.team" class="bg-gray-input focus:bg-gray-50 focus:border-teal-600
                    focus:ring-opacity-50 rounded-md mt-1 block w-full"
                >
                    <option value="">{{ __('select_project_filter') }}</option>
                    @foreach($teams as $team)
                        <option value="{{ $team->id }}">{{ $team->name }}</option>
                    @endforeach
                </select>
            </div>
        @endif
    </x-slot>
    <x-slot name="footer">
        <x-danger-button wire:click="closeSearchModal()" data-dismiss="modal">
            {{ __('button_cancel') }}
            <i wire:target="closeSearchModal" class="fad fa-times-circle ml-1"></i>
        </x-danger-button>
        <x-info-button wire:click="search" wire:loading.attr="disabled">
            {{ __('button_search') }}
            <i wire:loading.remove  wire:target="search" class="fad fa-search ml-1"></i>
            <i wire:loading wire:target="search" class="fad fa-spinner fa-spin ml-1"></i>
        </x-info-button>
    </x-slot>
</x-jet-dialog-modal>