<x-app-layout>
    <x-slot name="header">
            {{ $header }}
    </x-slot>

    <div class="py-6">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
        @livewire('profile.show', [
                'profile' => $profile,
                'inactive' => $inactive ?? false,
                'hidden' => $hidden ?? false,
                'inactiveLabel' => $inactiveLabel ?? false,
                'inactiveSince' => $inactiveSince ?? null,
                'registerDate' => $registerDate ?? null,
                'lastLoginDate' => $lastLoginDate ?? null,
                'emailUnverifiedLabel' => $emailUnverifiedLabel ?? false,
                'isIncomplete' => $isIncomplete ?? false,
                'incompleteLabel' => $incompleteLabel ?? false,
                'noExchangesYetLabel' => $noExchangesYetLabel ?? false,
                'removedSince' => $removedSince ?? null,
            ])

        </div>
    </div>

    @if($showIncompleteWarning ?? false)
        <!-- Incomplete Profile Warning Modal -->
        <div x-data="{ show: true }"
             x-show="show"
             x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })"
             x-on:keydown.escape.window="show = false"
             class="jetstream-modal fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
             style="display: none;">

            <!-- Backdrop -->
            <div x-show="show"
                 x-on:click="show = false"
                 class="fixed inset-0 bg-black opacity-50"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="ease-in duration-200"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0">
            </div>

            <!-- Modal Content -->
            <div x-show="show"
                 class="mb-6 bg-theme-background rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:max-w-2xl sm:mx-auto"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave="ease-in duration-200"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">

                <div class="px-6 py-6">
                    <!-- Header with Close Button -->
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center gap-3">
                            <svg class="w-8 h-8 text-theme-text-primary" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                            <div class="text-xl font-medium text-theme-primary">
                                {{ __('Your profile is currently hidden') }}
                            </div>
                        </div>
                        <button type="button" @click="show = false" class="text-theme-primary hover:text-theme-secondary transition-colors">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>

                    <!-- Content from side-post -->
                    <div class="text-theme-primary">
                        @livewire('side-post', [
                            'type' => 'SiteContents\\ProfileIncomplete',
                            'sticky' => true,
                            'fallbackTitle' => __('Your profile is currently hidden'),
                            'fallbackDescription' => __('Your profile is currently not visible to other users and organizations because it is incomplete.')
                        ])
                    </div>

                    <!-- Footer -->
                    <div class="flex justify-end mt-6 pt-6">
                        <x-jetstream.secondary-button @click="show = false" type="button">
                            {{ __('Close') }}
                        </x-jetstream.secondary-button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</x-app-layout>
