@model ProductDetailsModel

<link rel="stylesheet" href="~/lib_npm/magnific-popup/magnific-popup.css" />
<script asp-exclude-from-bundle="true" src="~/lib_npm/magnific-popup/jquery.magnific-popup.min.js" asp-location="Footer"></script>

<div class="picture-gallery">
    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsBeforePictures, additionalData = Model })
    <div class="picture">
        @if (Model.DefaultPictureZoomEnabled && Model.PictureModels.Count == 1)
        {
            <a href="@Model.DefaultPictureModel.FullSizeImageUrl" title="@Model.DefaultPictureModel.Title" id="main-product-img-lightbox-anchor-@Model.Id">
                <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" id="main-product-img-@Model.Id" />
            </a>
            <script asp-location="Footer">
                $(function () {
                    $('#main-product-img-lightbox-anchor-@Model.Id').magnificPopup({ type: 'image' });
                });
            </script>
        }
        else
        {
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" id="main-product-img-@Model.Id" />
        }
    </div>
    @if (Model.PictureModels.Count > 1 && Model.DefaultPictureZoomEnabled)
    {
        <div class="picture-thumbs">
            @foreach (var picture in Model.PictureModels)
            {
                <a class="thumb-item thumb-popup-link" data-pictureid="@picture.Id" href="@picture.FullSizeImageUrl" alt="@picture.AlternateText" title="@picture.Title">
                    <img src="@picture.ThumbImageUrl" alt="@picture.AlternateText" title="@picture.Title" data-defaultsize="@picture.ImageUrl" data-fullsize="@picture.FullSizeImageUrl" />
                </a>
            }
        </div>
        <script asp-location="Footer">
            $(function () {
                $('.picture-thumbs').magnificPopup(
                    {
                        type: 'image',
                        delegate: 'a',
                        removalDelay: 300,
                        navigateByImgClick: true,
                        preload: [0, 1],
                        gallery: {
                        enabled: true,
                        tPrev: '@T("Media.MagnificPopup.Previous")',
                        tNext: '@T("Media.MagnificPopup.Next")',
                        tCounter: '@T("Media.MagnificPopup.Counter")'
                        },
                        tClose: '@T("Media.MagnificPopup.Close")',
                        tLoading: '@T("Media.MagnificPopup.Loading")'
                    });
                });
        </script>
        <script asp-location="Footer">
            $(function () {
                $('.thumb-item > img').on('click',
                    function() {
                        $('#main-product-img-@Model.Id').attr('src', $(this).attr('data-defaultsize'));
                        $('#main-product-img-@Model.Id').attr('title', $(this).attr('title'));
                        $('#main-product-img-@Model.Id').attr('alt', $(this).attr('alt'));
                        $('#main-product-img-lightbox-anchor-@Model.Id').attr('href', $(this).attr('data-fullsize'));
                        $('#main-product-img-lightbox-anchor-@Model.Id').attr('title', $(this).attr('title'));
                    }
                );
            });
        </script>
    }
    else
    {
        if (Model.PictureModels.Count > 1)
        {
            if (Model.PictureModels.Count <= 3)
            {
                <div class="picture-thumbs">
                    @foreach (var picture in Model.PictureModels)
                    {
                        <a class="thumb-item thumb-popup-link" data-pictureid="@picture.Id">
                            <img src="@picture.ThumbImageUrl" alt="@picture.AlternateText" title="@picture.Title" data-defaultsize="@picture.ImageUrl" data-fullsize="@picture.FullSizeImageUrl" />
                        </a>
                    }
                </div>
            }
            else
            {
                <div class="picture-thumbs product-slider owl-carousel owl-theme" id="product-slider">
                    @foreach (var picture in Model.PictureModels)
                    {
                        <a class="thumb-item thumb-popup-link">
                            <img class="owl-lazy" data-src="@picture.ThumbImageUrl" src="@picture.ThumbImageUrl" alt="@picture.AlternateText" title="@picture.Title" data-defaultsize="@picture.ImageUrl" data-fullsize="@picture.FullSizeImageUrl" />
                        </a>
                    }
                </div>
            }
            <script asp-location="Footer">
                $(function () {
                    $('.thumb-item img').on('click', function () {
                        $('#main-product-img-@Model.Id').attr('src', $(this).attr('data-defaultsize'));
                        $('#main-product-img-@Model.Id').attr('title', $(this).attr('title'));
                        $('#main-product-img-@Model.Id').attr('alt', $(this).attr('alt'));
                        $('#main-product-img-lightbox-anchor-@Model.Id').attr('href', $(this).attr('data-fullsize'));
                        $('#main-product-img-lightbox-anchor-@Model.Id').attr('title', $(this).attr('title'));
                    });
                });
            </script>
        }
    }
    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsAfterPictures, additionalData = Model })
</div>
