@props(['views', 'height' => '520px', 'id' => null, 'initial' => 0])

@php
    // The viewer is a self-contained JS component; the server only supplies
    // the view payload (url plus ORIGINAL image dimensions).
    $viewerId = $id ?? 'xray-viewer-'.uniqid();
    $payloadId = $viewerId.'-data';
    $payload = collect($views)->map(fn ($view) => $view->toViewerArray())->values();
@endphp

@if ($payload->isEmpty())
    <div class="xrt-card">
        <div class="xrt-card-body">
            <x-ui.empty-state icon="bi-image" title="No x-ray views"
                message="Add at least one view to this case to use the viewer." />
        </div>
    </div>
@else
    <script type="application/json" id="{{ $payloadId }}">@json($payload)</script>
    <div id="{{ $viewerId }}" data-xray-viewer="{{ $payloadId }}" data-initial-index="{{ (int) $initial }}" style="--xrt-viewer-height: {{ $height }}"></div>
    @once
        @push('styles')
            <style>.xrt-viewer-stage { height: var(--xrt-viewer-height, 520px); }</style>
        @endpush
        @push('scripts')
            <script src="@xrtAsset('js/xray-viewer.js')"></script>
        @endpush
    @endonce
@endif