@props([
    'pages' => [],
    'selectedPages' => [],
])

{{--
    PDF Selected Pages Preview Component
    
    Displays a horizontal preview of selected pages with a modern design.
    
    Usage:
    <x-pdf.selected-pages-preview :pages="$pages" :selected-pages="$selectedPages" />
--}}

<div class="pdf-selected-preview">
    <div class="pdf-selected-preview-header">
        <em class="icon ni ni-check-circle-fill text-success me-2"></em>
        <span class="pdf-selected-preview-count">
            <strong x-text="selectedCount"></strong> {{ __('page(s) selected') }}
        </span>
    </div>
    <div class="pdf-selected-preview-list" x-ref="selectedPreviewList">
        <template x-for="(page, idx) in getSelectedPagesForPreview()" :key="page.number">
            <div class="pdf-selected-preview-item">
                <img 
                    x-bind:src="page.preview_url" 
                    x-bind:alt="'Page ' + page.displayNumber"
                    class="pdf-selected-preview-image"
                    x-on:error="$el.style.display = 'none'"
                />
                <span class="pdf-selected-preview-number" x-text="page.displayNumber"></span>
            </div>
        </template>
    </div>
</div>