<div class="lp-reviews-page pad-md-v" >
{% set review_context = get_reviews(sources=['consumerfusion']) %}
{% set reviews = review_context.filter() %}
{% set average_rating = review_context.get_average_rating() %}

    <div class="st-container">
        <div class="reviews-page-heading lp-flex lp-center-xs lp-middle-xs lp-between-sm lp-center-xs">
            <div class="lp-center-xs lp-start-sm">
                <h1 class="lp-h2 black">Customer Reviews</h1>
                <p class="p-2">Benjamin Franklin Plumbing</p>
            </div>
            
            {% if average_rating %}
            <div class="reviews-panel">
                <div class="reviews-logo-stars">
                    <div class="reviews-google-logo">
                        <img alt="Google reviews logo" width="32" height="32" src="/img/upload/google-g-logo.png">
                    </div>
                    <div class="reviews-stars">
                        <svg class="lp-icon lp-icon-stars-filled lp-icon-stars-reviews-item" role="img" focusable="false" aria-label="Number of Stars in the review"><use xlink:href="#lp-icon-stars-filled" width="134" height="24"></use></svg>
                    </div>
                </div>
                <div class="reviews-total">
                    <span class="reviews-avg">{{ average_rating.average_rating }}</span>
                    {% if place['user_ratings_total'] %}
                    <span class="reviews-num">({{ average_rating.count }} reviews)</span>
                    {% endif %}
                </div>
            </div>
            <!--end place rating >= 4 check-->
            {% endif %}
        </div>

        
        <div class="cmp-reviews-content">
            <div class="lp-reviews-wrap">
                {% for item in reviews %}
                <div class="review-item">
                    <img data-src="/img/upload/bfp-review-flag.png" width="43" height="60" alt="" loading="lazy" class="lazyload review-flag">
                    <div class="review-header">
                        {% if item['author_name'] %}
                        <p class="review-author">{{ item['author_name'] }}</p>
                        {% endif %}
                        <div class="starrating">
                            <svg class="lp-icon lp-icon-stars-filled lp-icon-stars-reviews-item" role="img" focusable="false" aria-label="Number of Stars in the review">
                                <use xlink:href="#lp-icon-stars-filled"></use>
                            </svg>
                        </div>
                        {% if item['datetime'] %}
                        <p class="review-date">{{ item['datetime']|datefmt('long') }}</p>
                        {% endif %}
                    </div>
                    <p class="p-2 review-content">
                        {% if item['text'] %}
                        {{ item['text'] }}
                        {% endif %}
                    </p>
                </div>
                
                {% endfor %}
            </div>
        </div>
    </div>
</div>


{% endif %}


<style>
    
    
/*reviews*/
.reviews {
    padding-top: 72px;
    padding-bottom: 72px;
}
.reviews .lp-flex {
    gap: 24px;
}
.reviews .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.reviews .heading-wrap {
    gap: 4px;
}
.reviews .heading-wrap h4 {
    font-size: 17px;
    font-weight: 700;
    line-height: 120%; /* 20.4px */
    letter-spacing: 0.85px;
    text-transform: uppercase;
    color: #000;
}
.reviews .slick-slide {
}
.reviews .slick-slide > div {
    padding: 16px;
    position: relative;
}
/*.reviews .slick-slide > div:after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    right: 16px;*/
/*    top: -14px;*/
/*    width: 42px;*/
/*    height: 54px;*/
/*    background: url(/img/upload/bfp-review-flag.png) no-repeat;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    z-index: 3;*/
/*}*/
.review-item {
    max-width: 300px;
    height: 400px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 2px 4px 25px 0px rgba(0, 0, 0, 0.25);
    z-index: 2;
    max-height: 400px;
    position: relative;
    padding: 32px 24px;
    overflow: visible;
    
    position: relative;
    display: flex!important;
    flex-direction: column;
    gap: 24px;
}
.review-flag {
    position: absolute;
    right: 16px;
    top: -14px;
    z-index: 3;
}
.review-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
.review-author {
    font-weight: 700;
    line-height: 160%; /* 33.6px */
}
.review-item .starrating svg {
    width: 134px;
    height: 24px;
    fill: var(--gold);
}
.review-date {
    align-self: stretch;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    line-height: 160%; /* 19.2px */
}
.review-content {
    line-height: 160%; /* 25.6px */
    height: auto;
}
.reviews .review-content {
    overflow-y: scroll;
    max-height: 241px;
}
.arrows-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    position: relative;
    margin-top: 32px;
}
.reviews .arrows-wrap {
    margin-top: -8px;
}
.arrows-wrap .slick-arrow {
    display: flex;
    padding: 9px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: var(--gold);
    border: 4px solid black;
    
    position: relative;
    top: unset;
    right: unset;
    left: unset;
    line-height: unset;
    font-size: unset;
    height: 44px;
    width: 44px;
    cursor: pointer;
    transform: unset;
}
.arrows-wrap .slick-arrow svg {
    width: 24px;
    height: 24px;
    fill: black
}

.reviews-cta .lp-btn.black {
    background: #000;
    color: var(--gold);
    border-color: #000;
    font-family: var(--lp-font-headline);
    font-size: 17px;
    font-weight: 700;
    line-height: 120%; /* 20.4px */
    letter-spacing: 0.51px;
    padding-top: 15px;
    padding-bottom: 15px;
}
@media (min-width: 992px) {
    .reviews.lp-50-50 .lp-50 {
        flex-basis: calc(50% - 12px);
        width: calc(50% - 12px);;
    }
    .reviews .lp-photo {
        margin-top: 62px;
    }
    .reviews .lp-flex {
    }
    .reviews .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        align-self: stretch;
        gap: 24px;
    }
    .reviews-cta {
        margin-top: 54px;
    }
}
@media (max-width: 991px) {
    .reviews {
        padding-top: 32px;
    }
    .reviews .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .reviews .heading-wrap {
        text-align: center;
        order: 3;
    }
    .reviews .reviews-avg {
        order: 2;
    }
    .reviews .lp-photo {
        order: 1;
    }
}
@media (max-width: 767px) {
    .reviews .reviews-arrows {
        display: none;
    }
    .reviews {
        padding: 0 0 32px 0;
    }
    .reviews .lp-container {
        padding: 0;
    }
    .reviews .heading-wrap, .reviews .right {
        padding-left: 16px;
        padding-right: 16px;
    }
    .reviews .lp-photo img {
        border-radius: 0;
        box-shadow: none;
    }
}

/*Reviews page*/
.reviews-page-heading {
    gap: 16px;
}
.lp-reviews-wrap {
    margin-top: 32px;
    columns: 3;
    column-gap: 24px;
}
.lp-reviews-page .review-item {
    max-width: 100%;
    height: auto;
    break-inside: avoid;
    margin-bottom: 36px;
    flex-direction: column;
    gap: 24px;
    max-height: none;
    position: static;
}
.lp-reviews-page .review-item .review-flag {
    display: none;
}
.lp-reviews-page .review-content {
    max-height: unset;
}
@media screen and (max-width: 1024px) {
    .lp-reviews-wrap {
        columns: 2;
    }
}
@media screen and (max-width: 767px) {
    .lp-reviews-wrap {
        columns: 1;
    }
}

</style>