<div>
    @if (Gate::check('addTeamMember', $team))
        <div class="hidden sm:block">
            <div class="py-8">
                <div class="border-t border-gray-200 dark:border-gray-700"></div>
            </div>
        </div>

        <!-- Add Team Member -->
        <div class="mt-10 sm:mt-0">
            <div class="md:grid md:grid-cols-3 md:gap-6">
                <div class="md:col-span-1 flex justify-between">
                    <div class="px-4 sm:px-0">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ __('Add Team Member') }}</h3>
                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ __('Add a new team member to your team, allowing them to collaborate with you.') }}</p>
                    </div>
                </div>

                <div class="mt-5 md:mt-0 md:col-span-2">
                    <form wire:submit="addTeamMember">
                        <div class="px-4 py-5 bg-white dark:bg-gray-800 sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                            <div class="grid grid-cols-6 gap-6">
                                <div class="col-span-6">
                                    <div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
                                        {{ __('Please provide the email address of the person you would like to add to this team.') }}
                                    </div>
                                </div>

                                <!-- Member Email -->
                                <div class="col-span-6 sm:col-span-4">
                                    <x-aura::label for="email" value="{{ __('Email') }}" />
                                    <x-aura::text-input id="email" type="email" class="mt-1 block w-full" wire:model="addTeamMemberForm.email" />
                                    <x-aura::input-error :messages="$errors->get('addTeamMemberForm.email')" class="mt-2" />
                                </div>

                                <!-- Role -->
                                @if (count($this->roles) > 0)
                                    <div class="col-span-6 lg:col-span-4">
                                        <x-aura::label for="role" value="{{ __('Role') }}" />
                                        <x-aura::input-error :messages="$errors->get('addTeamMemberForm.role')" class="mt-2" />

                                        <div class="relative z-0 mt-1 border border-gray-400/30 dark:border-gray-600 rounded-lg cursor-pointer">
                                            @foreach ($this->roles as $index => $role)
                                                <button type="button" class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-primary-300 focus:ring focus:ring-primary-200 {{ $index > 0 ? 'border-t border-gray-400/30 dark:border-gray-600 rounded-t-none' : '' }} {{ ! $loop->last ? 'rounded-b-none' : '' }}"
                                                                wire:click="$set('addTeamMemberForm.role', '{{ $role->key }}')">
                                                    <div class="{{ isset($addTeamMemberForm['role']) && $addTeamMemberForm['role'] !== $role->key ? 'opacity-50' : '' }}">
                                                        <!-- Role Name -->
                                                        <div class="flex items-center">
                                                            <div class="text-sm text-gray-600 dark:text-gray-300 {{ $addTeamMemberForm['role'] == $role->key ? 'font-semibold' : '' }}">
                                                                {{ $role->name }}
                                                            </div>

                                                            @if ($addTeamMemberForm['role'] == $role->key)
                                                                <svg class="ml-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                                            @endif
                                                        </div>

                                                        <!-- Role Description -->
                                                        <div class="mt-2 text-xs text-gray-600 dark:text-gray-400 text-left">
                                                            {{ $role->description }}
                                                        </div>
                                                    </div>
                                                </button>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-gray-800 text-end sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
                            <div x-data="{ shown: false, timeout: null }"
                                 x-init="@this.on('saved', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
                                 x-show.transition.out.opacity.duration.1500ms="shown"
                                 x-transition:leave.opacity.duration.1500ms
                                 style="display: none;"
                                 class="text-sm text-gray-600 dark:text-gray-400 mr-3">
                                {{ __('Added.') }}
                            </div>

                            <x-aura::primary-button>
                                {{ __('Add') }}
                            </x-aura::primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    @if ($team->teamInvitations->isNotEmpty() && Gate::check('addTeamMember', $team))
        <div class="hidden sm:block">
            <div class="py-8">
                <div class="border-t border-gray-200 dark:border-gray-700"></div>
            </div>
        </div>

        <!-- Team Member Invitations -->
        <div class="mt-10 sm:mt-0">
            <div class="md:grid md:grid-cols-3 md:gap-6">
                <div class="md:col-span-1 flex justify-between">
                    <div class="px-4 sm:px-0">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ __('Pending Team Invitations') }}</h3>
                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ __('These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.') }}</p>
                    </div>
                </div>

                <div class="mt-5 md:mt-0 md:col-span-2">
                    <div class="px-4 py-5 sm:p-6 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
                        <div class="space-y-6">
                            @foreach ($team->teamInvitations as $invitation)
                                <div class="flex items-center justify-between">
                                    <div class="text-gray-600 dark:text-gray-300">{{ $invitation->email }}</div>

                                    <div class="flex items-center">
                                        @if (Gate::check('removeTeamMember', $team))
                                            <!-- Cancel Team Invitation -->
                                            <button class="cursor-pointer ml-6 text-sm text-red-500 focus:outline-none"
                                                                wire:click="cancelTeamInvitation({{ $invitation->id }})">
                                                {{ __('Cancel') }}
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if ($team->users->isNotEmpty())
        <div class="hidden sm:block">
            <div class="py-8">
                <div class="border-t border-gray-200 dark:border-gray-700"></div>
            </div>
        </div>

        <!-- Manage Team Members -->
        <div class="mt-10 sm:mt-0">
            <div class="md:grid md:grid-cols-3 md:gap-6">
                <div class="md:col-span-1 flex justify-between">
                    <div class="px-4 sm:px-0">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ __('Team Members') }}</h3>
                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ __('All of the people that are part of this team.') }}</p>
                    </div>
                </div>

                <div class="mt-5 md:mt-0 md:col-span-2">
                    <div class="px-4 py-5 sm:p-6 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
                        <div class="space-y-6">
                            @foreach ($team->users->sortBy('name') as $user)
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <img class="w-8 h-8 rounded-full" src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}">
                                        <div class="ml-4 dark:text-gray-200">{{ $user->name }}</div>
                                    </div>

                                    <div class="flex items-center">
                                        <!-- Manage Team Member Role -->
                                        @if (Gate::check('addTeamMember', $team) && Laravel\Jetstream\Jetstream::hasRoles())
                                            <button class="ml-2 text-sm text-gray-400 underline" wire:click="manageRole('{{ $user->id }}')">
                                                {{ Laravel\Jetstream\Jetstream::findRole($user->membership->role)->name }}
                                            </button>
                                        @elseif (Laravel\Jetstream\Jetstream::hasRoles())
                                            <div class="ml-2 text-sm text-gray-400">
                                                {{ Laravel\Jetstream\Jetstream::findRole($user->membership->role)->name }}
                                            </div>
                                        @endif

                                        <!-- Leave Team -->
                                        @if ($this->user->id === $user->id)
                                            <button class="cursor-pointer ml-6 text-sm text-red-500" wire:click="$toggle('confirmingLeavingTeam')">
                                                {{ __('Leave') }}
                                            </button>

                                        <!-- Remove Team Member -->
                                        @elseif (Gate::check('removeTeamMember', $team))
                                            <button class="cursor-pointer ml-6 text-sm text-red-500" wire:click="confirmTeamMemberRemoval('{{ $user->id }}')">
                                                {{ __('Remove') }}
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Role Management Modal -->
    <x-aura::dialog-modal wire:model.live="currentlyManagingRole">
        <x-slot name="title">
            {{ __('Manage Role') }}
        </x-slot>

        <x-slot name="content">
            <div class="relative z-0 mt-1 border border-gray-400/30 dark:border-gray-600 rounded-lg cursor-pointer">
                @foreach ($this->roles as $index => $role)
                    <button type="button" class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-primary-300 focus:ring focus:ring-primary-200 {{ $index > 0 ? 'border-t border-gray-400/30 dark:border-gray-600 rounded-t-none' : '' }} {{ ! $loop->last ? 'rounded-b-none' : '' }}"
                                    wire:click="$set('currentRole', '{{ $role->key }}')">
                        <div class="{{ $currentRole !== $role->key ? 'opacity-50' : '' }}">
                            <!-- Role Name -->
                            <div class="flex items-center">
                                <div class="text-sm text-gray-600 dark:text-gray-300 {{ $currentRole == $role->key ? 'font-semibold' : '' }}">
                                    {{ $role->name }}
                                </div>

                                @if ($currentRole == $role->key)
                                    <svg class="ml-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                @endif
                            </div>

                            <!-- Role Description -->
                            <div class="mt-2 text-xs text-gray-600 dark:text-gray-400">
                                {{ $role->description }}
                            </div>
                        </div>
                    </button>
                @endforeach
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-aura::secondary-button wire:click="stopManagingRole" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-aura::secondary-button>

            <x-aura::primary-button class="ml-3" wire:click="updateRole" wire:loading.attr="disabled">
                {{ __('Save') }}
            </x-aura::primary-button>
        </x-slot>
    </x-aura::dialog-modal>

    <!-- Leave Team Confirmation Modal -->
    <x-aura::dialog-modal wire:model.live="confirmingLeavingTeam">
        <x-slot name="title">
            {{ __('Leave Team') }}
        </x-slot>

        <x-slot name="content">
            {{ __('Are you sure you would like to leave this team?') }}
        </x-slot>

        <x-slot name="footer">
            <x-aura::secondary-button wire:click="$toggle('confirmingLeavingTeam')" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-aura::secondary-button>

            <x-aura::danger-button class="ml-3" wire:click="leaveTeam" wire:loading.attr="disabled">
                {{ __('Leave') }}
            </x-aura::danger-button>
        </x-slot>
    </x-aura::dialog-modal>

    <!-- Remove Team Member Confirmation Modal -->
    <x-aura::dialog-modal wire:model.live="confirmingTeamMemberRemoval">
        <x-slot name="title">
            {{ __('Remove Team Member') }}
        </x-slot>

        <x-slot name="content">
            {{ __('Are you sure you would like to remove this person from the team?') }}
        </x-slot>

        <x-slot name="footer">
            <x-aura::secondary-button wire:click="$toggle('confirmingTeamMemberRemoval')" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-aura::secondary-button>

            <x-aura::danger-button class="ml-3" wire:click="removeTeamMember" wire:loading.attr="disabled">
                {{ __('Remove') }}
            </x-aura::danger-button>
        </x-slot>
    </x-aura::dialog-modal>
</div>
