<div class="card product-card {{modification}}">
    <div class="card__inner">
        {{#if tag.text}}
            <div class="range-card__tag {{tag.type}}">{{tag.text}}</div>
        {{/if}}
        <div class="card__offers">
            {{#if sale.discount}}
                <div class="card__offers-item card__offers-item_discount">{{sale.discount}}</div>
            {{/if}}
            {{#if badge.range}}
                <div class="card__offers-item card__offers-item_new">{{badge.range}}</div>
            {{/if}}
        </div>
        <a href="{{range-link}}" class="card__img-wrap">
            <img class="card__img" src="{{src}}" alt="{{title}}">
        </a>
        <div class="product-card__content">
            <a href="{{range-link}}" class="product-card__title">{{title}}</a>
            {{#if reviews}}
                <div class="product-card__reviews">
                    <div class="product-rating">
                        <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>
                        ({{reviews}})
                    </div>
                </div>
            {{/if}}
            {{#if additional-promo}}
                <div class="product-card__additional-promo">{{additional-promo}}</div>
            {{/if}}

            {{#if additional-descr}}
                <div class="product-card__additional-descr">{{additional-descr}}</div>
            {{/if}}

            {{#if additional-price}}
                <div class="product-card__additional-price">{{additional-price}}</div>
            {{/if}}
        </div>
        {{#if descr}}
            {{#if out-of-stock}}
                <div class="product-card__description no-flex">
                    <div class="card__descr card_offer_text">{{descr}}</div>
                </div>
            {{else}}
                {{#if click-collect-only}}
                    <div class="product-card__description no-flex">
                        <div class="card__descr card_offer_text">{{descr}}</div>
                    </div>
                {{else}}
                    <div class="product-card__description">
                        <div class="card__descr card_offer_text">{{descr}}</div>
                    </div>
                {{/if}}
            {{/if}}
        {{/if}}
        {{#if colors}}
            <div class="product-card__colors">
                {{>card-color-slider slidesCount="2" width="160"}}
            </div>
        {{/if}}
        <div class="product-card__price
      {{#if sale}}
        product-card__price_sale
      {{/if}}
            {{#if out-of-stock}}
        product-card__price_out-of-stock
      {{/if}}">
            {{#if colors}}
                <div class="product-card__price-descr">Price from:</div>
            {{/if}}
            {{#if out-of-stock}}
                <div class="product-card__price__out-of-stock">Out of stock</div>
            {{/if}}
            {{#if sale}}
                <div class="product-card__price__old-price">{{sale.price}}</div>
            {{/if}}
            <div class="product-card__price-value">{{#if click-collect-only}}
                <span class="product-card__price-from">From</span>{{/if}}{{price}}</div>
        </div>
        {{#if out-of-stock}}
            <div class="product-card__extra-info">
                <div class="row">
                    <div class="col-6 out-of-stock-container">
                        <div class="out-of-stock btn">
                            Out of Stock
                        </div>
                    </div>
                    <div class="col-6 notify-container">
                        <a href="#" class="btn notify-btn">
                            Notify
                        </a>
                    </div>
                </div>
            </div>
        {{/if}}
        {{#if click-collect-only}}
            <div class="product-card__extra-info">
                <div class="row">
                    <div class="col click-collect-container">
                        <a class="btn btn-secondary btn_small w-100" href="#">
                            <span class="btn__text">Click &amp; Collect only</span>
                        </a>
                    </div>
                </div>
            </div>
        {{/if}}
        {{#if action}}
            <div class="card__actions">
                <a href="{{range-link}}" class="card__action-link">{{action}}</a>
            </div>
        {{/if}}
    </div>
</div>
