<div>
    <x-filament::modal
        :id="\App\Filament\Livewire\OfficialNewsSlideOver::MODAL_ID"
        slide-over
        width="md"
        sticky-header
        sticky-footer
        :autofocus="false"
        teleport="body"
        class="fi-admin-official-news-slide-over"
    >
        <x-slot name="heading">
            {{ __('dberp.official_news.slide_over.heading') }}
        </x-slot>

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

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

        <x-slot name="footer">
            @if ($paginatedItems->hasPages())
                <x-filament::pagination :paginator="$paginatedItems" />
            @endif
        </x-slot>
    </x-filament::modal>
</div>
