<x-filament-widgets::widget>
    @php
        $panel = $this->panelData();
    @endphp

    @if ($panel !== null)
        <div
            wire:key="system-update-notice-banner-{{ $panel['notice_id'] }}"
            class="flex flex-col gap-4 rounded-xl border border-primary-200 bg-primary-50/80 p-4 shadow-sm dark:border-primary-500/30 dark:bg-primary-500/10 sm:flex-row sm:items-start sm:justify-between"
        >
            <div class="min-w-0 flex-1 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>
                <x-dberp.system-update.notice-summary
                    :summary="$panel['summary'] ?? null"
                    :show-label="false"
                    muted
                />
            </div>

            <div class="flex shrink-0 flex-wrap items-center gap-2">
                <x-filament::button
                    tag="a"
                    :href="$panel['update_center_url']"
                    color="primary"
                    size="sm"
                >
                    {{ __('dberp.system_update_notice.actions.view_update') }}
                </x-filament::button>

                <x-filament::button
                    wire:click="markSystemUpdateNoticeAsRead"
                    color="gray"
                    size="sm"
                >
                    {{ __('dberp.system_update_notice.actions.mark_read') }}
                </x-filament::button>

                <x-filament::button
                    wire:click="dismissSystemUpdateNotice"
                    wire:confirm="{{ __('dberp.system_update_notice.confirm.dismiss') }}"
                    color="gray"
                    outlined
                    size="sm"
                >
                    {{ __('dberp.system_update_notice.actions.dismiss') }}
                </x-filament::button>
            </div>
        </div>
    @endif
</x-filament-widgets::widget>
