@props([
    'panel' => null,
])

@if (is_array($panel))
    @php
        $isWarning = ($panel['banner_tone'] ?? 'primary') === 'warning';
        $containerClass = $isWarning
            ? 'border-warning-200 bg-warning-50/80 dark:border-warning-500/30 dark:bg-warning-500/10'
            : 'border-primary-200 bg-primary-50/80 dark:border-primary-500/30 dark:bg-primary-500/10';
    @endphp

    <div
        id="dberp-system-update-local-notice"
        @class(['space-y-3 rounded-xl border p-4 shadow-sm', $containerClass])
    >
        <div class="space-y-1">
            <p class="text-base font-semibold text-gray-950 dark:text-white">
                {{ $panel['title'] }}
            </p>
            <p class="text-sm text-gray-600 dark:text-gray-300">
                {{ $panel['banner_description'] }}
            </p>
        </div>

        <x-dberp.system-update.notice-summary :summary="$panel['summary'] ?? null" />

        <dl class="grid gap-2 text-sm sm:grid-cols-2">
            @if (filled($panel['latest_version']))
                <div>
                    <dt class="text-gray-500 dark:text-gray-400">{{ __('dberp.system_update_notice.panel.latest_version_label') }}</dt>
                    <dd class="font-medium text-gray-900 dark:text-white">{{ $panel['latest_version'] }}</dd>
                </div>
            @endif
            @if (filled($panel['last_checked_at_label']))
                <div>
                    <dt class="text-gray-500 dark:text-gray-400">{{ __('dberp.system_update_notice.panel.last_checked_label') }}</dt>
                    <dd class="font-medium text-gray-900 dark:text-white">{{ $panel['last_checked_at_label'] }}</dd>
                </div>
            @endif
        </dl>

        <p class="text-sm text-gray-500 dark:text-gray-400">
            {{ $panel['local_snapshot_hint'] }}
        </p>
    </div>
@endif
