<div class="p-5 sm:p-6">
    <div class="flex items-start gap-3.5">
        <span class="grid h-10 w-10 shrink-0 place-items-center rounded-md border border-accent/30 bg-accent/10 text-accent-text">
            <x-icon name="rotate" class="h-5 w-5" />
        </span>
        <div class="min-w-0 flex-1">
            <h2 class="font-display text-base font-semibold text-ink">{{ __('modals.system_update.title') }}</h2>
            <p class="mt-1 text-sm leading-relaxed text-ink-2">
                {{ __('modals.system_update.subtitle', ['server' => $serverName ?: __('modals.system_update.this_server')]) }}
            </p>
        </div>
    </div>

    @if ($error)
        <div class="mt-4 flex items-center gap-2.5 rounded-md border border-offline/25 bg-offline/10 px-3.5 py-3">
            <x-icon name="alert" class="h-4 w-4 shrink-0 text-offline" />
            <p class="text-sm text-ink-2">{{ $error }}</p>
        </div>
    @elseif (! $supported)
        <div class="mt-4 flex items-center gap-2.5 rounded-md border border-warning/25 bg-warning/10 px-3.5 py-3">
            <x-icon name="alert" class="h-4 w-4 shrink-0 text-warning" />
            <p class="text-sm text-ink-2">{{ $unsupportedReason ?: __('modals.system_update.unsupported_fallback') }}</p>
        </div>
    @else
        <div class="mt-4 flex items-center gap-3.5 rounded-md border border-line bg-inset px-3.5 py-3">
            <span @class([
                'grid h-9 w-9 shrink-0 place-items-center rounded-md border',
                'border-warning/25 bg-warning/10 text-warning' => $pending !== null && $pending > 0,
                'border-online/25 bg-online/10 text-online' => $pending === 0,
                'border-line bg-raised text-ink-3' => $pending === null,
            ])>
                <x-icon name="rotate" class="h-4 w-4" />
            </span>
            <div class="min-w-0">
                <p class="font-display text-sm font-semibold text-ink">
                    @if ($pending === null)
                        {{ __('modals.system_update.count_unknown') }}
                    @elseif ($pending === 1)
                        {{ __('modals.system_update.count_one') }}
                    @else
                        {{ __('modals.system_update.count_many', ['count' => $pending]) }}
                    @endif
                </p>
                <p class="mt-1 font-mono text-[11px] text-ink-3">
                    @if ($pending === null)
                        {{ __('modals.system_update.hint_unknown') }}
                    @else
                        {{ $pending > 0 ? __('modals.system_update.hint_recommended') : __('modals.system_update.hint_up_to_date') }}
                    @endif
                </p>
            </div>
        </div>

        @if ($done)
            <div @class([
                'mt-3 rounded-md border px-3.5 py-3',
                'border-online/25 bg-online/10' => $ok,
                'border-offline/25 bg-offline/10' => ! $ok,
            ])>
                <p @class([
                    'flex items-center gap-1.5 font-mono text-[11px]',
                    'text-online' => $ok,
                    'text-offline' => ! $ok,
                ])>
                    <x-icon :name="$ok ? 'activity' : 'alert'" class="h-3.5 w-3.5 shrink-0" />
                    {{ $ok ? __('modals.system_update.result_ok') : __('modals.system_update.result_failed') }}
                </p>
                @if (! $ok && $output !== '')
                    <pre class="mt-2 max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-ink-3">{{ $output }}</pre>
                @endif
            </div>
        @endif
    @endif

    <div class="mt-6 flex items-center justify-end gap-2">
        @if ($done)
            <x-btn variant="primary" wire:click="$dispatch('closeModal')">{{ __('common.close') }}</x-btn>
        @else
            <x-btn variant="secondary" wire:click="$dispatch('closeModal')">{{ __('common.cancel') }}</x-btn>
            @if (! $error && $supported)
                <x-btn variant="primary" wire:click="upgrade" wire:target="upgrade" wire:loading.attr="disabled">
                    <x-icon name="rotate" class="h-3.5 w-3.5" wire:loading.remove wire:target="upgrade" />
                    <svg wire:loading wire:target="upgrade" class="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
                    {{ __('modals.system_update.submit') }}
                </x-btn>
            @endif
        @endif
    </div>
</div>
