@php
       $authIsAdminInGroup=  $participant?->isAdmin();
       $authIsOwner=  $participant?->isOwner();
       $isGroup=  $conversation?->isGroup();
       $activeProfileType = getActiveProfileType();
       $activeProfile = getActiveProfile();
       $showSyncButton = ($authIsAdminInGroup || $authIsOwner)
           && in_array($activeProfileType, ['Organization', 'Bank', 'Admin'])
           && $activeProfile !== null;
    @endphp


<div x-ref="members"
    class="h-[calc(100vh_-_6rem)]  sm:h-[450px] bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)] dark:text-white border border-[var(--wc-light-secondary)] dark:border-[var(--wc-dark-secondary)]  overflow-y-auto overflow-x-hidden  ">

    {{-- Sync confirmation modal --}}
    @if($showSyncButton)
    <template x-teleport="body">
        <div x-data x-show="$wire.confirmingSync" x-cloak
            class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
            <div class="bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)] rounded-lg shadow-lg max-w-sm w-full mx-4 p-6 space-y-4">
                <h3 class="font-semibold text-base">{{ __('Sync members') }}</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    {{ __('This will remove all members that are currently not linked to :name.', ['name' => $activeProfile->name]) }}
                </p>
                <div class="flex justify-end gap-3 pt-2">
                    <x-jetstream.secondary-button type="button" wire:click="$set('confirmingSync', false)">
                        {{ __('Cancel') }}
                    </x-jetstream.secondary-button>
                    <x-jetstream.danger-button type="button"
                        wire:click="syncLinkedMembers"
                        wire:loading.attr="disabled"
                        wire:target="syncLinkedMembers">
                        <span wire:loading.remove wire:target="syncLinkedMembers">{{ __('Sync') }}</span>
                        <span wire:loading wire:target="syncLinkedMembers">{{ __('Syncing...') }}</span>
                    </x-jetstream.danger-button>
                </div>
            </div>
        </div>
    </template>
    @endif

    <header class=" sticky top-0 bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)] z-10 p-2">
        <div class="flex items-center justify-center pb-2">

            <x-wirechat::actions.close-modal>
            <button  dusk="close_modal_button"
                class="p-2 ml-0 text-gray-600 hover:bg-[var(--wc-light-secondary)] dark:hover:bg-[var(--wc-dark-secondary)] dark:hover:text-white rounded-full hover:text-gray-800 ">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class=" w-5 w-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                </svg>

            </button>
            </x-wirechat::actions.close-modal>

            <h3 class=" mx-auto font-semibold ">{{__('wirechat::chat.group.members.heading.label')}} </h3>

        </div>

        {{-- Sync linked members button --}}
        @if($showSyncButton)
        <div class="px-2 pb-2">
            <button type="button"
                wire:click="confirmSync"
                wire:loading.attr="disabled"
                wire:target="confirmSync"
                class="flex items-center gap-3 text-xs text-theme-primary hover:text-theme-brand hover:underline focus:outline-none disabled:opacity-50">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
                </svg>
                <span>{{ __('Sync with all users linked to this :type', ['type' => __(strtolower($activeProfileType))]) }}</span>
            </button>
        </div>
        @endif

        {{-- Search --}}
        <section class="flex flex-wrap items-center px-0 border-b dark:border-[var(--wc-dark-secondary)]">
            <input type="search" id="users-search-field" wire:model.live.debounce='search' autocomplete="off"
                placeholder="{{__('wirechat::chat.group.members.inputs.search.placeholder')}}"
                class=" w-full border-0 w-auto dark:bg-[var(--wc-dark-primary)] outline-hidden focus:outline-hidden bg-[var(--wc-dark-parimary)] rounded-lg focus:ring-0 hover:ring-0">
        </section>

    </header>


    <div class="relative w-full p-2 ">
        {{-- <h5 class="text font-semibold text-gray-800 dark:text-gray-100">Recent Chats</h5> --}}
        <section class="my-4 grid">
            @if (count($participants)!=0)

                <ul class="overflow-auto flex flex-col">

                    @foreach ($participants as $key => $participant)
                        @php
                            $loopParticipantIsAuth =
                                $participant->participantable_id == auth()->id() &&
                                $participant->participantable_type == auth()->user()->getMorphClass();
                        @endphp
                        <li x-data="{ open: false }" x-ref="button" @click="open = ! open" x-init="$watch('open', value => {
                            $refs.members.style.overflow = value ? 'hidden' : '';
                        })"
                            aria-modal="true"
                            tabindex="0"
                            x-on:keydown.escape.stop="open=false"
                            @click.away ="open=false;" wire:key="users-{{ $key }}"
                            :class="!open || 'bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-secondary)]'"
                            class="flex cursor-pointer group gap-2 items-center overflow-x-hidden p-2 py-3">

                            <label class="flex cursor-pointer gap-2 items-center w-full">
                                <x-wirechat::avatar src="{{ $participant->participantable->cover_url }}"
                                    class="w-10 h-10" />

                                <div class="grid grid-cols-12 w-full ">
                                    <h6 @class(['transition-all truncate group-hover:underline col-span-10' ])>
                                        {{ $loopParticipantIsAuth ? 'You' : $participant->participantable->display_name }}</h6>
                                        @if ($participant->isOwner()|| $participant->isAdmin())
                                        <span  style="background-color: var(--wirechat-primary-color);" class=" flex items-center col-span-2 text-white text-xs font-medium ml-auto px-2.5 py-px rounded-sm ">
                                            {{$participant->isOwner()? __('wirechat::chat.group.members.labels.owner'): __('wirechat::chat.group.members.labels.admin')}}
                                        </span>
                                        @endif

                                </div>

                                <div x-show="open" x-anchor.bottom-end="$refs.button"
                                    class="ml-auto bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-secondary)] border-[var(--wc-light-primary) dark:border-[var(--wc-dark-primary)] py-4 shadow-sm border rounded-md grid space-y-2 w-52">
                                    {{-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-gray-600 dark:text-gray-300  w-6 h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                                    </svg>   --}}

                                    <x-wirechat::dropdown-button wire:click="sendMessage('{{ $participant->id }}')"
                                        class="truncate ">
                                        @if ($loopParticipantIsAuth)
                                            
                                        {{__('wirechat::chat.group.members.actions.send_message_to_yourself.label')}}
                                        @else
                                        
                                        {{__('wirechat::chat.group.members.actions.send_message_to_member.label',['member'=>$participant->participantable?->display_name ])}}
                                        @endif
                                    </x-wirechat::dropdown-button>

                                    @if ($authIsAdminInGroup || $authIsOwner)
                                        {{-- Only show admin actions to owner of group and if is not the current loop --}}
                                        {{--AND We only want to show admin actions if participant is not owner --}}
                                        @if ($authIsOwner && !$loopParticipantIsAuth)
                                            @if ($participant->isAdmin())
                                                <x-wirechat::dropdown-button
                                                    wire:click="dismissAdmin('{{ $participant->id }}')"
                                                    wire:confirm="{{__('wirechat::chat.group.members.actions.dismiss_admin.confirmation_message',['member'=>$participant->participantable?->display_name])}}"
                                                    class="  ">
                                                    {{__('wirechat::chat.group.members.actions.dismiss_admin.label')}}
                                                </x-wirechat::dropdown-button>
                                            @else
                                                <x-wirechat::dropdown-button
                                                    wire:click="makeAdmin('{{ $participant->id }}')"
                                                    wire:confirm="{{__('wirechat::chat.group.members.actions.make_admin.confirmation_message',['member'=>$participant->participantable?->display_name])}}"
                                                    class=" ">
                                                    {{__('wirechat::chat.group.members.actions.make_admin.label')}}
                                                </x-wirechat::dropdown-button>
                                            @endif
                                        @endif

                                            {{--AND We only want to show remove actions if participant is not owner of conversation because we don't want to remove owner--}}
                                            @if (!$participant->isOwner() && !$loopParticipantIsAuth && !$participant->isAdmin())
                                            <x-wirechat::dropdown-button
                                                wire:click="removeFromGroup('{{ $participant->id }}')"
                                                wire:confirm="{{__('wirechat::chat.group.members.actions.remove_from_group.confirmation_message',['member'=>$participant->participantable?->display_name])}}"
                                                class="text-red-500 ">
                                                {{__('wirechat::chat.group.members.actions.remove_from_group.label')}}
                                            </x-wirechat::dropdown-button>
                                            @endif

                                    @else
                                    @endif



                                </div>
                            </label>

                        </li>
                    @endforeach



                </ul>


                {{-- Load more button --}}
                @if ($canLoadMore)
                    <section class="w-full justify-center flex my-3">
                        <button dusk="loadMoreButton" @click="$wire.loadMore()"
                            class=" text-sm dark:text-white hover:text-gray-700 transition-colors dark:hover:text-gray-500 dark:gray-200">
                            {{__('wirechat::chat.group.members.actions.load_more.label')}}
                        </button>
                    </section>
                @endif

            @else

            <span class="m-auto">{{__('wirechat::chat.group.members.labels.no_members_found')}}</span>
            @endif

        </section>
    </div>

</div>