<div class="row image-row">
    <div class="grid6 main-image  js-set-slider  js-open-image-gallery-modal" data-slide="1"
{{--         href="{{$imageTunnel}}{{$property->decoded_info->LargePictures[0]}}" data-lightbox="image-slider"--}}
    >
        @if($property->status == '3')<img class="overlay" alt="sold"
                                          src="/img/sold.svg"> @elseif($property->status == '4')<img
                class="overlay" alt="rent" src="/img/rent.svg"> @elseif($property->status == '2')<img
                alt="option" class="overlay" src="/img/option.svg"> @endif
        <img alt="{{$property->decoded_info->Street}} {{$property->decoded_info->HouseNumber}}"
             src="{{$imageTunnel}}{{$property->decoded_info->LargePicture}}"

        />
    </div>

    <div class="grid6 sub-images">
        @if(sizeof($property->decoded_info->LargePictures)>4)
            @for($i = 1; $i <=3 ; $i++ )
                <div class="grid6 small-image sub{{$i}}  js-set-slider   js-open-image-gallery-modal" data-slide="{{$i + 1}}"
                   style="background-image: url('{{$imageTunnel}}{{$property->decoded_info->LargePictures[$i]}}')"
{{--                   href="{{$imageTunnel}}{{$property->decoded_info->LargePictures[$i]}}" data-lightbox="image-slider"--}}
                >
                </div>
            @endfor
            <div class="grid6 photoslider  js-set-slider   js-open-image-gallery-modal" data-slide="5"
{{--               href="{{$imageTunnel}}{{$property->decoded_info->LargePictures[4]}}" data-lightbox="image-slider"--}}
            >
                <div>
                    <span></span>

                    <p class="amount">@lang('translations.remaining') {{sizeof($property->decoded_info->LargePictures) - 4}} @lang('translations.photos')</p>

                    <p class="more">@lang('translations.morePhotos')</p>
                </div>
{{--                @for($i =5; $i < sizeof($property->decoded_info->LargePictures); $i++)--}}
{{--                    <a href="{{$imageTunnel}}{{$property->decoded_info->LargePictures[$i]}}"--}}
{{--                       data-lightbox="image-slider"></a>--}}
{{--                @endfor--}}
            </div>
        @else
            @for($i = 1; $i <sizeof($property->decoded_info->LargePictures) ; $i++ )
                <div class="grid6 small-image sub{{$i}}  js-set-slider  js-open-image-gallery-modal" data-slide="{{$i + 1}}"
                   style="background-image: url('{{$imageTunnel}}{{$property->decoded_info->LargePictures[$i]}}')"
{{--                   href="{{$imageTunnel}}{{$property->decoded_info->LargePictures[$i]}}" data-lightbox="image-slider"--}}
                >
                </div>
            @endfor
        @endif
    </div>
</div>

<div class="c-image-gallery__body">
    <div class="c-image-gallery__shade"></div>
    <div class="c-image-gallery__modal">
        <div class="c-image-gallery__close  js-close-image-gallery">
            <span></span>
            <span></span>
        </div>
        <ul id="image-gallery" class="c-image-gallery__slider">
            @foreach($property->decoded_info->LargePictures as $key => $largePicture)
                <li class="c-image-gallery__slide" data-thumb="{{ $property->decoded_info->SmallPictures[$key] }}">
                    <img class="c-image-gallery__image" src="{{ $largePicture  }}"/>
                </li>
            @endforeach
        </ul>
    </div>
</div>