<div class="space-y-4">
    @if($platformEnabled && $isEnabled)
        {{-- Informational Display --}}
        <div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 space-y-3">
            <div class="flex items-start gap-3">
                <div class="flex-shrink-0 mt-0.5">
                    <svg class="h-5 w-5 text-theme-primary" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                        {{ __('Automatic deletion enabled') }}
                    </p>
                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                        {{ __('Messages will be deleted after') }}: <span class="font-semibold">{{ $this->formattedDuration }}</span>
                    </p>
                </div>
            </div>

            @if ($allowUsersToKeep)
                <div class="pt-3 border-t border-gray-200 dark:border-gray-700">
                    <div class="flex items-start gap-2">
                        <svg class="h-5 w-5 text-gray-700 dark:text-gray-300 mt-0.5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                        </svg>
                        <p class="text-xs text-gray-600 dark:text-gray-400">
                            @if ($this->formattedKeptDuration)
                                {{ __('messages.wirechat.keep_messages_info') }} <span class="font-semibold">{{ $this->formattedKeptDuration }}</span>.
                            @else
                                {{ __('messages.wirechat.keep_messages_permanently') }}
                            @endif
                        </p>
                    </div>
                </div>
            @endif
        </div>

    @elseif(!$platformEnabled)
        {{-- Feature Disabled --}}
        <div class="rounded-md bg-gray-50 dark:bg-gray-800 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        {{ __('Automatic message deletion is currently disabled') }}
                    </p>
                </div>
            </div>
        </div>

    @elseif(!$isEnabled)
        {{-- Enabling... --}}
        <div class="rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-yellow-400 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-yellow-700 dark:text-yellow-300">
                        {{ __('Enabling automatic message deletion...') }}
                    </p>
                </div>
            </div>
        </div>
    @endif
</div>
