@model ProductDetailsModel

<div class="col-xl-6 col-lg-6 col-md-5 col-12 mt-md-0 mt-3 px-0">
    <div class="gallery">
        @if (Model.PictureModels.Any())
        {
            var schemaPicture = Model.PictureModels.FirstOrDefault();
            <img src="@schemaPicture.FullSizeImageUrl" class="d-none" itemprop="image">   
        }
        @if (Model.PictureModels.Count == 1) { @if (Model.DefaultPictureZoomEnabled) {
            <gallery-images></gallery-images>

            <script type="text/html" id="picture">
                <div>
                    <img class="image main-image zoom" id="main-product-img-@Model.Id" v-for="(image, i) in images" :src="image.url" :alt="image.alt"
                         :title="image.title" :key="i" @@click="index=i">
                    <vue-gallery-slideshow :images="images" :index="index" @@close="index=null"></vue-gallery-slideshow>
                </div>
            </script>
            <script asp-location="Footer" asp-order="300">
                    Vue.component('gallery-images', {
                      template: '#picture',
                      data() {
                          return {
                              images: [
                                @foreach (var picture in Model.PictureModels)
                                {
                                    if (Model.PictureModels.First() == picture)
                                    {
                                        <text>
                                            { url: '@picture.FullSizeImageUrl', fullimg: '@picture.FullSizeImageUrl', alt:'@picture.AlternateText', title: '@picture.Title' },
                                        </text>
                                    }
                                    else
                                    {
                                        <text>
                                    { url: '@picture.ImageUrl', fullimg: '@picture.FullSizeImageUrl', alt:'@picture.AlternateText', title: '@picture.Title' },
                                        </text>
                                    }
                                }
                                ],
                                index: null
                          }
                      },
                      components: {
                            VueGallerySlideshow
                      },
                    });
            </script>

        }
        else
        {
            <img id="main-product-img-@Model.Id" class="image main-image"
                 src="@Model.DefaultPictureModel.ImageUrl"
                 alt="@Model.DefaultPictureModel.AlternateText"
                 title="@Model.DefaultPictureModel.Title" />
        }
}
    @if (Model.PictureModels.Count == 0)
    {
        <img id="main-product-img-@Model.Id" class="image main-image"
             src="@Model.DefaultPictureModel.ImageUrl"
             alt="@Model.DefaultPictureModel.AlternateText"
             title="@Model.DefaultPictureModel.Title" />
    }
    @if (Model.DefaultPictureZoomEnabled)
    {
        @if (Model.PictureModels.Count > 1)
        {

            <img id="main-product-img-@Model.Id" class="image main-image zoom"
                 src="@Model.DefaultPictureModel.ImageUrl"
                 alt="@Model.DefaultPictureModel.AlternateText"
                 title="@Model.DefaultPictureModel.Title"
                 onclick="document.querySelector('.thumb-image').click()" />

            <script type="text/html" id="picture">
                <div>
                    <img class="image thumb-image zoom" v-for="(image, i) in images" :src="image.url" :datasrc="image.fullimg"
                         :alt="image.alt" :title="image.title" :key="i" @@click="index=i">
                    <div>
                        <vue-gallery-slideshow :images="images" :index="index" @@close="index=null"></vue-gallery-slideshow>
                    </div>
                </div>
            </script>
            <gallery-images></gallery-images>
            <script asp-location="Footer" asp-order="300">
                    Vue.component('gallery-images', {
                          template: '#picture',
                          data() {
                              return {
                                    images: [
                                        @foreach (var picture in Model.PictureModels)
                                        {
                                            if (Model.PictureModels.First() == picture)
                                            {
                                                <text>
                                                    { url: '@picture.FullSizeImageUrl', fullimg: '@picture.FullSizeImageUrl', alt:'@picture.AlternateText', title: '@picture.Title' },
                                                </text>
                                            }
                                            else
                                            {
                                                <text>
                                            { url: '@picture.ImageUrl', fullimg: '@picture.FullSizeImageUrl', alt:'@picture.AlternateText', title: '@picture.Title' },
                                                </text>
                                            }
                                        }
                                    ],
                                    index: null
                                }
                          },
                          components: {
                                VueGallerySlideshow
                          },
                    });
            </script>
        }
    }
    else
    {
        @if (Model.PictureModels.Count > 1)
        {
            <img id="main-product-img-@Model.Id" class="image main-image"
                 src="@Model.DefaultPictureModel.ImageUrl"
                 alt="@Model.DefaultPictureModel.AlternateText"
                 title="@Model.DefaultPictureModel.Title" />
            <div>
                @foreach (var picture in Model.PictureModels)
                {
                    <img class="image thumb-image"
                         src="@picture.ThumbImageUrl"
                         alt="@picture.AlternateText"
                         title="@picture.Title"
                         data-src="@picture.ImageUrl"
                         @@click="Gallery.extendOptions.methods.changeImg($event)" />
                }
            </div>
            <script asp-location="Footer" asp-order="300">
                    var gallery = new Vue({
                        methods: {
                            changeImg(event) {
                                var img = event.srcElement.getAttribute('data-src');
                                var mainImg = document.getElementById('main-product-img-@Model.Id');
                                mainImg.setAttribute('src', img);
                            }
                        }
                    })
            </script>
        }
    }
    </div>
</div>