{{#extend "base" pageClass="page-product-details" title="Product details page new"
          isDiscount=true
          isSQM=true
          isDescription=true
          isCashback=false
          isSize=true
          hourly-delivery=true
          badge-text='15% off'
          badge-color='yellow'
          badge-text-color='gray'
          step3=true
          currentlyInStock=true
          pagePdp=true
}}
    {{#content "head" mode="append" pagePdp=true}}
        <link type="text/css" rel="stylesheet" href="./css/components/pdp-favourite-product.css">
<script defer type="text/javascript">
    var script = document.createElement('script');
    var productIdentifiers = '[products/wickes/B3182_221100_00, products/wickes/B3182_221100_01, products/wickes/B3182_221100_02]';

    function convertToArrayOfIdentifiers(hybrisString) {
        return hybrisString.trim().slice(1, hybrisString.length - 1).split(',').map(function (s) {
            return s.trim()
        })
    }

    function transformationSaver(imageArray) {
        return imageArray
            .filter(i => !!i)
            .map(function (uri) {
                return {
                    publicId: uri,
                    transformation: {
                        "background": "#FFFFFF",
                        "dpr": 1,
                        "fetch_format": "jpg",
                        "quality": "auto:good"
                    }
                }
            })
    }

    script.onload = function () {
        const myWidget = cloudinary.galleryWidget({
            "container": ".pdp__gallery",
            "cloudName": "dj6kabpgi",
            "secure": true,
            "privateCdn": true,
            "secureDistribution": 'media.wickes.co.uk',
            "mediaAssets": transformationSaver(convertToArrayOfIdentifiers(productIdentifiers)),
            "imageBreakpoint": 250,
            "zoomProps": {
                "level": 3,
                "trigger": "click"
            },
            "loaderProps": {
                "style": "circle"
            },
            "preload": [],
            "placeholderImage": false,
            "carouselLocation": "bottom",
            "carouselOffset": 10,
            "thumbnailProps": {
                "navigationShape": "radius",
                "navigationColor": "#FFFFFF",
                "navigationIconColor": "#000000",
                "selectedBorderPosition": "top"
            },
            "videoProps": {
                "controls": "all",
                "sound": true
            }
        });
        myWidget.render();
    };
    script.src = ' https://product-gallery.cloudinary.com/all.js';
    document.head.appendChild(script);
</script>
        <style data-emotion=""></style>
    {{/content}}
    {{#content "body"}}
        <main class="pdp__main">
            <div class="container">
                <div class="pdp">
                    <div class="pdp__title">
                        <div class="pdp__heading-block">
                            <h1 class="pdp__heading">Bosch PSB 1800 LI-2 18V Li-Ion Cordless Combi Drill Example with long
                                title in two raws
                            </h1>
                            <div class="pdp__favourite">
                                {{>favourite-product}}
                            </div>
                        </div>
                        <div class="pdp__reviews_small">
                            <span class="product-code product-code-v2">Product code: <strong id="product-code-val">236334</strong></span>
                            <div class="product-card__reviews review-star">
                                <div class="product-rating product-rating-v2">
                                    <div class="rating-bg">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <div class="rating-overlay"
                                             data-rating="{{#if review-rating}}{{review-rating}}{{else}}0{{/if}}">
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                                <span class="review-star-average review-star-average-v2">(4.6)</span>
                            </div>
                            <span class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews" id="open-review">82 reviews</a></span>
                        </div>
                    </div>

                    <div class="pdp__gallery css-kvsl5t">
                        <div class="css-15nk06b" mode="classic" data-test="gallery-wrap">
                            <div id="" style="" class="viewer-wrap css-1bd295m" data-test="gallery-viewer-wrap">
                                <div data-test="carousel-viewer-wrap" radius="0" class="css-114r11c">
                                    <div class="css-1108ew" data-test="carousel">
                                        <div data-test="carousel-wrapper" spacing="0" class="css-1710sie">
                                            <div data-test="carousel-inner-wrapper" spacing="0" class="css-1h3ami6"
                                                 style="transition: transform 250ms ease 0s;">
                                                <div data-test="carousel-item-0" class="css-15xv5ui">
                                                    <div data-test="slide-item-wrap" spacing="0" width="330px" height="330px"
                                                         class="css-1qowidu">
                                                        <button type="button" class="assetWrapper css-15mqa5c" tabindex="-1"
                                                                width="330" height="330" data-index="0" data-test="0">
                                                            <div data-test="image-wrap" class="css-1a5u3i4" data-ready="true">
                                                                <div data-test="img-zoom-wrap" class="css-b7jmoi"><img
                                                                        itemprop="image"
                                                                        src="https://media.wickes.co.uk/image/upload/b_rgb:FFFFFF,c_pad,dpr_1.0,f_jpg,h_500,q_auto:good,w_500/c_pad,h_500,w_500/v1/products/wickes/B3182_221100_00?pgw=1"
                                                                        alt="Gallery asset 1 of 3" width="330" height="330">
                                                                    <div data-test="zoom-wrap" class="css-zyblj3">
                                                                        <div width="330" height="330" radius="0"
                                                                             coords="[object Object]" spacing="10"
                                                                             data-test="zoom-flyout-wrap" class="css-1u8tids">
                                                                            <img itemprop="image"
                                                                                 src="https://media.wickes.co.uk/image/upload/b_rgb:FFFFFF,c_pad,dpr_1.0,f_jpg,h_1500,q_auto:good,w_1500/c_pad,h_1500,w_1500/v1/products/wickes/B3182_221100_00?pgw=1&amp;pgwact=1"
                                                                                 width="330" height="330"
                                                                                 alt="Gallery asset 1 of 3" class="css-z1hvqy"
                                                                                 style="left: 0px; top: 0px;"></div>
                                                                        <div width="110" height="110" radius="0" color="#FFF"
                                                                             opacity="0.5" data-test="zoom-lens"
                                                                             class="css-11tb1d8"></div>
                                                                        <div data-test="zoom-media-icon-wrap" absolute="true"
                                                                             class="css-6mvedx">
                                                                            <div class="css-f7got2" data-test="tip-wrap">Tap to
                                                                                zoom
                                                                            </div>
                                                                        </div>
                                                                        <div data-test="zoom-trigger" class="css-5a6eau"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div data-test="carousel-item-1" class="css-15xv5ui">
                                                    <div data-test="slide-item-wrap" spacing="0" width="330px" height="330px"
                                                         class="css-1qowidu">
                                                        <button type="button" class="assetWrapper css-15mqa5c" tabindex="-1"
                                                                width="330" height="330" data-index="0" data-test="0">
                                                            <div data-test="image-wrap" class="css-1a5u3i4">
                                                                <div relative="true" class="css-u1s97t">
                                                                    <div absolute="true" class="css-cm391e">
                                                                        <div relative="true" class="css-lyyj3g"
                                                                             data-test="loading">
                                                                            <div absolute="true" class="css-cm391e"></div>
                                                                            <svg width="82.5" viewBox="0 0 100 100"
                                                                                 preserveAspectRatio="xMidYMid"
                                                                                 class="css-1moxpjw">
                                                                                <circle stroke="#000" cx="50" cy="50"
                                                                                        fill="none" r="40"></circle>
                                                                            </svg>
                                                                            <div color="#000" opacity="0.5" width="82.5"
                                                                                 class="css-loader css-1w44sxa">
                                                                                <div></div>
                                                                                <div></div>
                                                                                <div></div>
                                                                                <div></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div data-test="carousel-item-2" class="css-15xv5ui">
                                                    <div data-test="slide-item-wrap" spacing="0" width="330px" height="330px"
                                                         class="css-1qowidu">
                                                        <button type="button" class="assetWrapper css-15mqa5c" tabindex="-1"
                                                                width="330" height="330" data-index="0" data-test="0">
                                                            <div data-test="image-wrap" class="css-1a5u3i4">
                                                                <div relative="true" class="css-u1s97t">
                                                                    <div absolute="true" class="css-cm391e">
                                                                        <div relative="true" class="css-lyyj3g"
                                                                             data-test="loading">
                                                                            <div absolute="true" class="css-cm391e"></div>
                                                                            <svg width="82.5" viewBox="0 0 100 100"
                                                                                 preserveAspectRatio="xMidYMid"
                                                                                 class="css-1moxpjw">
                                                                                <circle stroke="#000" cx="50" cy="50"
                                                                                        fill="none" r="40"></circle>
                                                                            </svg>
                                                                            <div color="#000" opacity="0.5" width="82.5"
                                                                                 class="css-loader css-1w44sxa">
                                                                                <div></div>
                                                                                <div></div>
                                                                                <div></div>
                                                                                <div></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" shape="none" color="#FFFFFF" size="54" class="css-1gjqb5r" offset="0"
                                            direction="right" aria-label="Next" data-test="nav-next">
                                        <svg data-test="svg-image" class="css-1p2w2m3" viewBox="0 0 24 24"
                                             preserveAspectRatio="xMidYMid">
                                            <path d="M8.59,16.59L13.17,12L8.59,7.41L10,6l6,6l-6,6L8.59,16.59z"></path>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                            <div spacing="10" data-test="gallery-spacer" class="css-1u55xsb"></div>
                            <div mode="classic" data-test="gallery-thumbnail-wrap" class="css-1ddvm94">
                                <div class="css-15m61y9" data-test="carousel">
                                    <div data-test="carousel-wrapper" spacing="2" class="css-le8itm">
                                        <div data-test="carousel-inner-wrapper" spacing="2" class="css-1ocofxp"
                                             style="transition: transform 250ms ease 0s;">
                                            <div data-test="carousel-item-0" class="css-15xv5ui">
                                                <div data-test="slide-item-wrap" spacing="2" width="64px" height="64px"
                                                     class="css-znt2t1">
                                                    <div class="thumbnails-wrap css-um1pnd" radius="0" width="64" height="64"
                                                         data-test="thumbnails-wrap">
                                                        <button type="button" class="assetWrapper css-1bmwq9u" tabindex="0"
                                                                data-index="0" data-test="0" width="64" height="64">
                                                            <div data-test="image-wrap" class="css-1a5u3i4" data-ready="true">
                                                                <div data-test="img-zoom-wrap" class="css-b7jmoi"><img
                                                                        itemprop="image"
                                                                        src="https://media.wickes.co.uk/image/upload/b_rgb:FFFFFF,c_pad,dpr_1.0,f_jpg,h_100,q_auto:good,w_100/c_pad,h_100,w_100/v1/products/wickes/B3182_221100_00?pgw=1"
                                                                        alt="Gallery asset 1 of 3" width="64" height="64"></div>
                                                            </div>
                                                        </button>
                                                        <div data-test="selected-wrap" class="css-5lrj63" style=""></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div data-test="carousel-item-1" class="css-15xv5ui">
                                                <div data-test="slide-item-wrap" spacing="2" width="64px" height="64px"
                                                     class="css-znt2t1">
                                                    <div class="thumbnails-wrap css-um1pnd" radius="0" width="64" height="64"
                                                         data-test="thumbnails-wrap">
                                                        <button type="button" class="assetWrapper css-1bmwq9u" tabindex="0"
                                                                data-index="1" data-test="1" width="64" height="64">
                                                            <div data-test="image-wrap" class="css-1a5u3i4" data-ready="true">
                                                                <div data-test="img-zoom-wrap" class="css-b7jmoi"><img
                                                                        itemprop="image"
                                                                        src="https://media.wickes.co.uk/image/upload/b_rgb:FFFFFF,c_pad,dpr_1.0,f_jpg,h_100,q_auto:good,w_100/c_pad,h_100,w_100/v1/products/wickes/B3182_221100_01?pgw=1"
                                                                        alt="Gallery asset 2 of 3" width="64" height="64"></div>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div data-test="carousel-item-2" class="css-15xv5ui">
                                                <div data-test="slide-item-wrap" spacing="2" width="64px" height="64px"
                                                     class="css-znt2t1">
                                                    <div class="thumbnails-wrap css-um1pnd" radius="0" width="64" height="64"
                                                         data-test="thumbnails-wrap">
                                                        <button type="button" class="assetWrapper css-1bmwq9u" tabindex="0"
                                                                data-index="2" data-test="2" width="64" height="64">
                                                            <div data-test="image-wrap" class="css-1a5u3i4" data-ready="true">
                                                                <div data-test="img-zoom-wrap" class="css-b7jmoi"><img
                                                                        itemprop="image"
                                                                        src="https://media.wickes.co.uk/image/upload/b_rgb:FFFFFF,c_pad,dpr_1.0,f_jpg,h_100,q_auto:good,w_100/c_pad,h_100,w_100/v1/products/wickes/B3182_221100_02?pgw=1"
                                                                        alt="Gallery asset 3 of 3" width="64" height="64"></div>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pdp__aside">
                        {{> price-block-v2
                        isProductSaved=false
                        isUserLogedOut=true
                        install=true
                        sample=true
                        big-wins=true
                        stock-accordion="stock-accordion"
                        cc=false
                        nearestAmount=12
                        isUserNonRegistered=true
                        delivery=true
                        nearest-purchase=true
                        }}
                        {{> fulfilment-accordions }}
                    </div>
                    <div class="pdp__description">
                        {{> product-main-info-v2 isAdvice=true}}
                    </div>
                    {{> fulfilment-accordions }}
                </div>
            </div>
            <div class="container container-info">
                <div class="pdp">
                    <div class="pdp__info">
                        {{> pdp-info-v2 tile=true }}
                    </div>
                </div>
            </div>
                {{> recently-viewed }}
        </main>
    {{/content}}
    {{#content "foot" mode="append"}}
        <script type="text/html" id="mini-basket-popup">
                {{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
        </script>
        <script defer src="./js/page/pdp.js"></script>
        <script defer src="./js/pdp-favourite-product.bundle.min.js"></script>
        {{> click-and-collect-modal}}
        {{> thank-you-modal}}
    {{/content}}
{{/extend}}
<script type="module" defer src="./js/page/installation/ti.js"></script>
<script>
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
        $(document).ready(function () {
            $('.modal').on('scroll', function () {
                $(':focus').blur();
            });
        });
    }

    $(document).ready(function () {

        $('#info-details').toggleClass('accordion_collapsed');
        $('#details-content').css('display', 'block');

        $('#open-review').on('click', function () {
            $('#info-review').toggleClass('accordion_collapsed');
            $('#review-content').css('display', 'block');
        });

        $('.ti__next ti__next3 .btn').on('click', function () {
           alert('Click');
        });
    })
</script>
