{{#extend "base" pageClass="top-rated" title="Top rated page" }}
  {{#content "head" mode="append"}}
    <link type="text/css" rel="stylesheet" href="./css/pages/page_top-rated.css">
  {{/content}}
  {{#content "body"}}
    <main class="container top-rated-page">

      <div class="card-block">
        <div class="top-rated-by-you">
              <div class="top-rated-by-you__content">
                  <h1 class="top-rated-by-you__header">Top Rated by You!</h1>
                  <p class="top-rated-by-you__info">
                      We think that all our products are great, but don't just take our word for it! All of the products below have received an average score of at least 4 out of 5 from our customer reviews.
                  </p>
                  <div class="stars">                
                    <img src="https://media.wickes.co.uk/is/image/wickes/top_rated_five_stars_AS298166362?&amp;wid=270&amp;hei=47&amp;extend=0,0,0,0&amp;fmt=png-alpha" alt="stars">
                </div>

              </div>

              <div class="great-quality-block">
                  {{#extend "card-slider"  slidesCount="5" slidesCountMd="3"}}
                      {{#content "cards"}}
                          {{#each great-quality.products}}
                              {{> great-quality modification="swiper-slide"}}
                          {{/each}}
                      {{/content}}
                  {{/extend}}
              </div>

        </div>
      </div>

      <div class="card-block">
        <h2 class="heading2 color-header">Find the perfect products for your projects</h2>

        {{> dpd-list rootList=perfect-products }}

        {{#each top-rated-product.product-type}}
            {{> top-rated-perfect-product }}
        {{/each}}

      </div>

      <div class="card-block" id="customer-favorites">
        <h2 class="heading2">Our Customer Favourites</h2>

        <div class="customer-favourites-block">
            {{#each customer-favourites-product-top-rated.products}}

                <div class="customer-favourites-block__item">
                    <div class="customer-favourites-block__item-wrap">
                        <div class="product-img">
                            <img class="{{#if full-img}}full-width-img {{else}}full-height-img{{/if}}" src="{{product-src}}" alt="{{name}}">
                        </div>
                        <div class="product-star-rate">
                            <img class="product-star-rate__img" src="{{rate}}" alt="rate">
                        </div>
                        <a href="{{ link }}" class="customer-favourites__shadow">
                          <div class="customer-favourites__shadow-text">{{ name }}</div>
                          <span class="customer-favourites__shadow-link">Shop now <i class="fas fa-angle-right"></i></span>
                        </a>
                    </div>
                </div>
            {{/each}}
        </div>
      </div>

      <div class="card-block">
        <div class="gift-card-block">
            <div class="gift-card">
                <img class="gift-card-img" src="http://media.wickes.co.uk/is/image/wickes/non-core-giftcards-desktop-header?&fmt=png-alpha" alt="Gift Card">
            </div>

            <h3 class="heading3">Win a £50 Gift Card!</h3>

            <div class="gift-card-block__info">
                <p>Tell us what you think about our products and you could win a £50 gift card to spend with Wickes. Simply post a review and if we publish it on the website you’ll automatically be entered into our monthly prize draw*.</p>
                <p>At the end of the month, one lucky winner will be chosen at random and the winner will be notified by email. You can rate and review as many products as you like each month, giving you multiple chances to win – so get posting and good luck!</p>
                <p class="gift-card-block__info-footnote">* Prize draw Terms & Conditions apply.</p>
            </div>

            <div class="link-holder"><a href="#">Find out more</a></div>
        </div>
    ` </div>

      <div class="card-block">

        <h3 class="heading3">How to leave a review</h3>

        <div class="review-block">
            <div class="review-block__item">
                <div class="review-block__item-icon">
                    <img src="https://media.wickes.co.uk/is/image/wickes/sign-in-icon?&fmt=png-alpha" alt="leave_review1">
                </div>
                <h5>1. Sign in to our website</h5>
            </div>
            <div class="review-block__item">
                <div class="review-block__item-icon">
                    <img src="https://media.wickes.co.uk/is/image/wickes/find-product-icon?&fmt=png-alpha" alt="leave_review2">
                </div>
                <h5>2. Find your product</h5>
            </div>
            <div class="review-block__item">
                <div class="review-block__item-icon">
                    <img src="https://media.wickes.co.uk/is/image/wickes/write-review-icon?&fmt=png-alpha" alt="leave_review3">
                </div>
                <h5>3. Click on 'Write a review'</h5>
            </div>
            <div class="review-block__item">
                <div class="review-block__item-icon">
                    <img src="https://media.wickes.co.uk/is/image/wickes/rate-product-icon?&fmt=png-alpha" alt="leave_review4">
                </div>
                <h5>4. Rate your product</h5>
            </div>
        </div>
      </div>

    </main>
{{/content}}
{{#content "foot" mode="append"}}
<script defer src="./js/page/top-rated.js"></script>
{{/content}}
{{/extend}}
