<div>
    @auth
        @if($hasAccepted && !$needsReaccept)
            {{-- User has accepted and version is current --}}
            <div class="overflow-hidden bg-theme-background shadow-xl sm:rounded-lg mb-3">
                <div class="px-3 sm:px-0">
                    <div class="max-w-4xl mx-auto my-12 p-4">
                        <div class="flex items-center space-x-3">
                            <svg class="h-6 w-6 text-theme-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <div>
                                <h3 class="text-lg font-semibold text-theme-primary">{{ __('Principles Accepted') }}</h3>
                                <p class="text-sm text-theme-secondary">
                                    {{ __('You accepted these principles on') }} {{ \Carbon\Carbon::parse($acceptedData['accepted_at'])->isoFormat('LL') }}
                                </p>
                                <p class="text-xs text-theme-muted mt-1">
                                    {{ __('Language') }}: {{ strtoupper($acceptedData['locale']) }} |
                                    {{ __('Version updated') }}: {{ \Carbon\Carbon::parse($acceptedData['updated_at'])->isoFormat('LL') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @elseif($hasAccepted && $needsReaccept)
            {{-- User has accepted but needs to re-accept newer version --}}
            <div class="overflow-hidden bg-theme-background shadow-xl sm:rounded-lg mb-3">
                <div class="px-3 sm:px-0">
                    <div class="max-w-4xl mx-auto my-12 p-4">
                        <div class="p-4 bg-gray-50 dark:bg-gray-800/20 border border-gray-300 dark:border-gray-700 rounded-lg mb-6">
                            <div class="flex items-start space-x-3">
                                <svg class="h-6 w-6 text-gray-400 dark:text-gray-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                                </svg>
                                <div>
                                    <h3 class="text-base font-semibold text-gray-800 dark:text-gray-200">{{ __('Updated Principles') }}</h3>
                                    <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
                                        {{ __('Our principles have been updated since you last accepted them. Please review the changes and accept the new version.') }}
                                    </p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                                        {{ __('You previously accepted on') }}: {{ \Carbon\Carbon::parse($acceptedData['accepted_at'])->isoFormat('LL') }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <h3 class="mb-6 text-xl font-semibold text-theme-primary">{{ __('Accept Updated Principles') }}</h3>

                        <form wire:submit.prevent="accept">
                            <div class="mb-6">
                                <label class="flex items-start space-x-3">
                                    <x-jetstream.checkbox wire:model="agreed" />
                                    <span class="text-theme-primary">
                                        {{ __('I have read and accept the updated platform principles described above.') }}
                                    </span>
                                </label>
                            </div>

                            <div class="flex items-center justify-end space-x-3">
                                <x-jetstream.button type="submit" wire:loading.attr="disabled">
                                    <span wire:loading.remove wire:target="accept">
                                        {{ __('Accept Updated Principles') }}
                                    </span>
                                    <span wire:loading wire:target="accept">
                                        {{ __('Saving...') }}
                                    </span>
                                </x-jetstream.button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @else
            {{-- User needs to accept --}}
            <div class="overflow-hidden bg-theme-background shadow-xl sm:rounded-lg mb-3">
                <div class="px-3 sm:px-0">
                    <div class="max-w-4xl mx-auto my-12 p-4">
                        <h3 class="mb-6 text-xl font-semibold text-theme-primary">{{ __('Accept Principles') }}</h3>

                        <form wire:submit.prevent="accept">
                            <div class="mb-6">
                                <label class="flex items-start space-x-3">
                                    <x-jetstream.checkbox wire:model="agreed" />
                                    <span class="text-theme-primary">
                                        {{ __('I have read and accept the platform principles described above.') }}
                                    </span>
                                </label>
                            </div>

                            <div class="flex items-center justify-end space-x-3">
                                <x-jetstream.button type="submit" wire:loading.attr="disabled">
                                    <span wire:loading.remove wire:target="accept">
                                        {{ __('Accept Principles') }}
                                    </span>
                                    <span wire:loading wire:target="accept">
                                        {{ __('Saving...') }}
                                    </span>
                                </x-jetstream.button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    @endauth

    @guest
        {{-- Not logged in - no action needed --}}
    @endguest
</div>
