@push('css')
    <style>
        .gallery-item {
            cursor: pointer;
            border-radius: 10px !important;
            transition: all 0.3s ease !important;
        }

        .gallery-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
            border-color: var(--bs-primary) !important;
        }

        .gallery-item:hover .position-absolute.bg-dark {
            opacity: 1 !important;
        }
    </style>

    <link href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/css/lightgallery-bundle.min.css" rel="stylesheet">
@endpush

@if (isset($imageUrl))
    <div class="lightgallery-container mb-3">
        <div class="card gallery-item h-100 shadow-sm border-0" data-src="{{ $imageUrl }}"
            data-asset-id="{{ $id ?? '' }}" style="transition: all 0.3s ease;">
            <div class="position-relative overflow-hidden">
                <img src="{{ $imageUrl }}" alt="{{ $title ?? '' }}"
                    class="card-img-top h-100 w-100 object-fit-cover" style="max-height: 350px">
                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-75"
                    style="opacity: 0; transition: opacity 0.3s ease; cursor: pointer;">
                    <div class="text-center p-3">
                        <i class="fas fa-search-plus text-white fa-2x mb-2"></i>
                        <p class="text-white small mb-0">Klicken für größere Ansicht</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

@push('js')
    <script src="{{ asset('assets/custom/js/common/file-manger.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/lightgallery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/zoom/lg-zoom.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/fullscreen/lg-fullscreen.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            initializeLightGallery();
        });
    </script>
@endpush