@aware(['page'])
<div>
    <div class="relative w-full mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
        <div class="w-full" id="{{$name}}">
            <img src="{{asset('storage/'.$image)}}" alt="" class="shadow-xl rounded-xl w-full"/>
        </div>
    </div>
    @if($pointers)
        @push('inlinescript')
            @php
                $safeVarName = 'pointers' . preg_replace('/[^A-Za-z0-9_]/', '_', $name);
            @endphp
            <script>
                const {{$safeVarName}} = [
                    @foreach($pointers as $pointer)
                        { top: {{$pointer['top']}}, left: {{$pointer['left']}}, label: '{{$pointer['label']}}' },
                    @endforeach
                ];

                createInteractivePoints(pointers{{$name}}, '{{$name}}');
            </script>
        @endpush
    @endif
</div>