@php
    $defaultImageContent = getContent('default_images.content', true);
    $defaultImage = getImage('assets/images/frontend/default_images/' . @$defaultImageContent->data_values->loading_image);
@endphp

@php
    $grid_id    = isset($grid_id) ? $grid_id : 'flexBox';
    $useAds     = isset($useAds) ? (bool)$useAds : true;
    $row_height = isset($row_height) ? (int)$row_height : null;
    $ratio_w    = isset($ratio_w) ? (int)$ratio_w : null; // fixed width ratio (optional)
    $ratio_h    = isset($ratio_h) ? (int)$ratio_h : null; // fixed height ratio (optional)
@endphp

<ul class="list list--row flex-images {{ @$class ?? 'gallery' }} flex-wrap" id="{{ $grid_id }}">

    @foreach ($images as $image)
        @php
            $imageUrl = imageUrl(getFilePath('stockImage'), $image->thumb);
        @endphp
        <li class="item gallery__item" data-w="{{ $ratio_w ?? $image->image_width }}" data-h="{{ $ratio_h ?? $image->image_height }}" data-video={{ $image->video }}>
            <a class="gallery__link" href="{{ route('img.detail', $image->slug) }}"></a>
            <figure>
                <a class="gallery__content" href="{{ route('img.detail', $image->slug) }}">
                    <span class="gallery__title">
                        {{ __($image->title) }}
                    </span>
                    <span class="gallery__footer">
                        <span class="gallery__author">
                            <span class="gallery__user">
                                <img class="gallery__user-img lazy-loading-img"
                                    data-image_src="{{ getImage(getFilePath('userProfile') . '/' . $image->user->image, null, 'user') }}"
                                    src="{{ $defaultImage }}" alt="@lang('Contributor')" decoding="async">
                            </span>
                            <span class="gallery__user-name">{{ $image->user->fullname }}</span>
                        </span>
                        <span class="gallery__like">
                            <span class="gallery__like-icon">
                                <i class="fas fa-heart"></i>
                            </span>
                            <span class="gallery__like-num">{{ shortNumber($image->total_like) }}</span>
                        </span>
                    </span>
                </a>
            </figure>
            <div class="image--details-icon">
                @if ($image->premium)
                    <span class="gallery__premium">
                        <i class="fas fa-crown"></i>
                    </span>
                @endif
                @if ($image->video)
                    <span class="gallery__video_icon">
                        <i class="las la-video"></i>
                    </span>
                @endif
            </div>
            <div class="item-video item-link">
                <span class="d-none h-100 w-100">
                    <video class="w-100 h-100" src="" autoplay muted loop></video>
                </span>
                <img class="gallery__img lazy-loading-img" data-image_src="{{ $imageUrl }}" src="{{ $defaultImage }}" alt="@lang('Image')" decoding="async">
                @if (isset($image->similarity))
                    <span class="gallery__similarity-badge" title="Similarity">
                        {{ number_format($image->similarity, 2) }}%
                    </span>
                @endif
            </div>
            @php
                $user = auth()->user();
                $like = $image->likes->where('user_id', @$user->id)->count();
                $collectionImage = $user ? $user->collectionImages->where('image_id', $image->id)->first() : null;
            @endphp

            <div class="gallery__share">
                <div class="list gallery__list">
                    <div>
                        <button class="gallery__btn @if ($like) unlike-btn @else like-btn @endif" data-has_icon="1"
                            data-bs-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="custom--tooltip" data-image="{{ $image->id }}"
                            title="@if ($like) @lang('Unlike') @else @lang('like') @endif">
                            @if ($like)
                                <i class="las la-heart active"></i>
                            @else
                                <i class="lar la-heart"></i>
                            @endif
                        </button>
                    </div>
                    <div>
                        <button class="gallery__btn collect-btn" data-bs-toggle="tooltip" data-bs-placement="left"
                            data-bs-custom-class="custom--tooltip" data-image_id="{{ $image->id }}"
                            title="@if ($collectionImage) @lang('Collected') @else
                @lang('Collect') @endif">
                            <i class="las la-folder-plus"></i>
                        </button>
                    </div>
                    <div>
                        <button class="gallery__btn share-btn" data-bs-toggle="tooltip" data-bs-placement="left"
                            data-bs-custom-class="custom--tooltip" data-route="{{ route('img.detail', $image->slug) }}"
                            data-url_len_code="{{ urlencode(route('img.detail', $image->slug)) }}"
                            data-image_title="{{ $image->title }}" title="Share">
                            <i class="las la-share"></i>
                        </button>
                    </div>

                </div>

            </div>
        </li>
        @if ($useAds && $loop->iteration % 10 == 0)
            <li class="item gallery__item gallery__ad" data-w="200" data-h="200" data-video="0">
                <div class="ad-slot">
                    @php echo getAds('200x200'); @endphp
                </div>
            </li>
        @endif
    @endforeach
</ul>
@push('script-lib')
    <script src="{{ asset($activeTemplateTrue . 'js/jquery.flex-images.min.js') }}"></script>
@endpush

@push('script')
    <script>
        "use strict";

        function getGalleryRowHeight() {
            const w = window.innerWidth;
            // If a specific row_height was provided from the include, respect it
            if (@json($row_height)) { return @json($row_height); }
            if (w >= 1400) return 220;   // xl and above
            if (w >= 1200) return 200;   // lg
            if (w >= 992)  return 180;   // md
            if (w >= 768)  return 160;   // sm
            return 140;                  // xs
        }

        function initFlexGallery() {
            $('#{{ $grid_id }}').flexImages({
                rowHeight: getGalleryRowHeight(),
                truncate: true
            });
        }

        // Initial render
        initFlexGallery();

        // Debounced resize to reflow the gallery responsively
        let __resizeTO;
        $(window).on('resize', function () {
            clearTimeout(__resizeTO);
            __resizeTO = setTimeout(function () {
                // Re-run layout with updated row height
                initFlexGallery();
            }, 150);
        });

        $('.gallery__item').on('mouseenter', function() {
            let video = $(this).data('video');
            if (video) {
                let videoUrl = (`{{ asset(getFilePath('stockVideo') . '/' . ':video') }}`).replace(":video", video);
                $(this).find('.item-video span').removeClass('d-none');
                $(this).find('.item-video span video').attr('src', videoUrl);
            }
        })

        $('.gallery__item').on('mouseleave', function() {
            $(this).find('.item-video span').addClass('d-none');
            $(this).find('.item-video span video').attr('src', '');
        })
    </script>
@endpush
@push('style')
    <style>
        .item {
            position: relative;
            border-radius: 4px;
            overflow: hidden;
        }

        .item-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .item-video video {
            width: inherit;
            height: inherit;
            object-fit: cover;
        }

        /* Ensure preview images fill the item container consistently */
        .item-video img.gallery__img {
            width: inherit;
            height: inherit;
            object-fit: cover;
            display: block;
        }

        .gallery__video_icon {
            z-index: 1;
            width: 30px;
            height: 30px;
            display: grid;
            place-items: center;
            border-radius: 3px;
            font-size: 16px;
            background: hsl(var(--black)/0.5);
            backdrop-filter: blur(2px);
            color: hsl(var(--white));
        }

        .gallery__video_icon i {
            font-size: 18px;
        }

        .image--details-icon {
            position: absolute;
            left: 15px;
            top: 15px;
        }

        .gallery__similarity-badge {
            position: absolute;
            right: 10px;
            bottom: 10px;
            background: hsl(var(--black)/0.6);
            color: hsl(var(--white));
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            backdrop-filter: blur(2px);
        }

        /* 200x200 ad tile styling inside grid */
        .gallery__ad .ad-slot {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
        }
        .gallery__ad img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        /* Make entire ad tile clickable when ad contains a link */
        .gallery__ad { cursor: pointer; }
        .gallery__ad .ad-slot > div { /* override helper wrapper inline styles */
            width: 100%;
            height: 100%;
            padding: 0 !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gallery__ad .ad-slot a { /* stretch anchor to full tile */
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

    </style>
.user-gallery {
    background: none !important;
}
@endpush