@php
    /** @var list<array{id: int, title: string, url: string, level: string, level_label: string, level_color: string, pinned: bool, is_read: bool, published_at_label: ?string}> $items */
    /** @var list<array{id: int, title: string, url: string, level: string, level_label: string, level_color: string, pinned: bool, is_read: bool, published_at_label: ?string}> $visibleItems */
    $badgeLabel = $unreadCount > 99 ? '99+' : (string) $unreadCount;
@endphp

<div>
    @if ($items !== [])
        <x-filament::dropdown
            placement="bottom-end"
            teleport
            class="fi-admin-official-news"
        >
            <x-slot name="trigger">
                <button
                    type="button"
                    class="fi-admin-official-news__trigger"
                    title="{{ __('dberp.official_news.topbar.title') }}"
                    aria-label="{{ __('dberp.official_news.topbar.label') }}"
                >
                    <x-filament::icon
                        icon="heroicon-o-megaphone"
                        class="fi-admin-official-news__icon"
                    />
                    <span class="fi-admin-official-news__label">{{ __('dberp.official_news.topbar.label') }}</span>
                    @if ($unreadCount > 0)
                        <span class="fi-admin-official-news__badge" aria-hidden="true">{{ $badgeLabel }}</span>
                    @endif
                </button>
            </x-slot>

            <div class="fi-admin-official-news__panel">
                <div class="fi-admin-official-news__header">
                    <p class="fi-admin-official-news__heading">{{ __('dberp.official_news.topbar.heading') }}</p>
                    @if ($unreadCount > 0)
                        <button
                            type="button"
                            wire:click="markAllAsRead"
                            class="fi-admin-official-news__mark-all"
                        >
                            {{ __('dberp.official_news.actions.mark_all_read') }}
                        </button>
                    @endif
                </div>

                <ul class="fi-admin-official-news__list">
                    @foreach ($visibleItems as $item)
                        @include('filament.livewire.official-news-item', [
                            'item' => $item,
                            'keyPrefix' => 'dropdown',
                        ])
                    @endforeach
                </ul>

                @if ($hiddenCount > 0)
                    <div class="fi-admin-official-news__footer">
                        <button
                            type="button"
                            wire:click="showAllItems"
                            x-on:click="close()"
                            class="fi-admin-official-news__more"
                        >
                            {{ __('dberp.official_news.actions.view_all', ['count' => $hiddenCount]) }}
                        </button>
                    </div>
                @endif
            </div>
        </x-filament::dropdown>

        @livewire(\App\Filament\Livewire\OfficialNewsSlideOver::class, key('dberp-official-news-slide-over'))
    @endif
</div>
