{{#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}}
    {{/content}}
    {{#content "body"}}
        <main class="pdp__main">
            <div class="container">
                <div class="pdp">
                    <div class="pdp__title">
                        <h1 class="pdp__heading">Wickes Callika™ Mist Grey Porcelain Wall &amp; Floor Tile - 600 x 300mm</h1>
                        <div class="pdp__reviews_small" style="min-height: 48px;">
						<span class="product-code product-code-v2">
							Product code:&nbsp;<strong id="product-code-val">170284</strong>
						</span>
                            <div class="product-card__reviews review-star" id="pr-reviewsnippet"
                                 data-pr-component="ReviewSnippet" data-pr-page_id="170284" data-pr-mounted="true">
                                <div class="ssc skeleton is-loading" data-pr-placeholder>
                                    <div class="ssc-line"></div>
                                    <div class="ssc-line"></div>
                                </div>
                                <div class="p-w-r" style="">
                                    <section data-testid="review-snippet" class="pr-review-snippet-container ">
                                        <div class="pr-snippet-stars-reco-inline pr-snippet-minimal">
                                            <div class="pr-snippet-stars-reco-stars" style="display: flex">
                                                <div class="pr-snippet" style="display: none;">
                                                    <div class="pr-snippet-stars-container">
                                                        <div class="pr-snippet-stars pr-snippet-stars-png">
                                                            <div aria-hidden="true" class="pr-rating-stars">
                                                                <div class="pr-star-v4 pr-star-v4-100-filled"></div>
                                                                <div class="pr-star-v4 pr-star-v4-100-filled"></div>
                                                                <div class="pr-star-v4 pr-star-v4-100-filled"></div>
                                                                <div class="pr-star-v4 pr-star-v4-100-filled"></div>
                                                                <div class="pr-star-v4 pr-star-v4-75-filled"></div>
                                                            </div>
                                                            <div aria-hidden="true" class="pr-snippet-rating-decimal">
                                                                4.6
                                                            </div>
                                                        </div>
                                                        <span class="pr-accessible-text">Rated 4.6 out of 5 stars</span>
                                                    </div>
                                                    <div class="pr-snippet-read-and-write"><a href="#"
                                                                                              class="pr-snippet-review-count">292
                                                        Reviews</a><a
                                                            href="/p/securedWriteReview?pr_page_id=170284&amp;pr_merchant_id=213541&amp;pr_merchant_group_id=49568"
                                                            class="pr-snippet-write-review-link pr-underline"
                                                            rel="nofollow">Write a Review</a></div>
                                                </div>
                                            </div>
                                            <div class="pr-snippet-stars-reco-reco">
                                                <div class="pr-snippet-reco-to-friend">
                                                    <div class="pr-snippet-reco-to-friend-percent pr-snippet-reco-to-friend-green">
                                                        <span aria-hidden="true"><span class="pr-checkbox-icon"><svg
                                                                viewBox="0 0 176 176" focusable="false"
                                                                aria-hidden="true"><circle fill="#0A8900" stroke="white"
                                                                                           stroke-width="8" cx="88"
                                                                                           cy="88" r="81.2"></circle><path
                                                                fill="white" stroke="white" stroke-width="5"
                                                                d="M77.2 121.3L43 87.2l5.5-5.6 28.7 28.6 50.3-50.3 5.5 5.6"></path></svg></span></span>
                                                        <div class="pr-reco pr-reco-green"><span class="pr-reco-value">93% </span>
                                                        </div>
                                                    </div>
                                                    <span class="pr-reco-to-friend-message">of respondents would recommend this to a friend</span>
                                                </div>
                                            </div>
                                            <div style="clear: both;"></div>
                                        </div>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pdp__gallery">
                        {{> gallery-pdp-v2 }}
                    </div>
                    <div class="pdp__aside">
                        {{> price-block-v2 isProductSaved=false isUserLogedOut=false }}
                    </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 floor=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>
        {{> click-and-collect-modal}}
        {{> thank-you-modal}}
    {{/content}}
{{/extend}}
<!--<script defer src="./js/page/ti.js"></script>-->
<script type="module" defer src="./js/page/installation/fi.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>

