@model VendorReviewOverviewModel
@using System.Globalization
@{
    int ratingPercent = 0;
    if (Model.TotalReviews != 0)
    {
        ratingPercent = ((Model.RatingSum * 100) / Model.TotalReviews) / 5;
    }
}
@if (Model.AllowCustomerReviews)
{
    <div class="vendor-reviews-overview d-inline-flex align-items-center flex-wrap" @if (Model.TotalReviews > 0) { <text> itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" </text> }>
        @{
            double ratingValue = 0;
            if (Model.TotalReviews != 0)
            {
                ratingValue = Convert.ToDouble(((Model.RatingSum * (double)100) / Model.TotalReviews) / (double)100);
            }
        }
        <div class="rating">
            <b-form-rating id="rating-inline" class="p-0" variant="warning" no-border size="sm" show-value precision="2" v-model="vendorreviewsoverview.rating" readonly inline value="@(ratingValue.ToString("0.00", CultureInfo.InvariantCulture))"></b-form-rating>
            <template v-if="vendorreviewsoverview.Model.TotalReviews > 0">
                <div class="product-review-links order-3">
                    <b-button variant="outline-info" size="sm" class="review-scroll-button" @@click="active = true" href="#review-tab___BV_tab_button__">
                        {{vendorreviewsoverview.Model.TotalReviews}}
                        @Loc["Reviews.Overview.Reviews"]
                    </b-button>
                </div>
                @{
                    double ratingValuee = ratingPercent / (double)20;
                }
                <span itemprop="reviewCount" style="display: none;">(@ratingValuee.ToString("0.0", new CultureInfo("en-US")))</span>
            </template>
            <template v-else>
                <div class="vendor-no-reviews order-3">
                    <a class="btn btn-sm btn-outline-info" @@click="vendorreviews.addVendorReview('@Url.RouteUrl("VendorReviews", new { vendorId = Model.VendorId })')">
                        @Loc["VendorReviews.Overview.First"]
                    </a>
                </div>
            </template>
        </div>
    </div>
}
<script asp-location="Footer" asp-order="300">
    var vendorreviewsoverview = new Vue({
        data: function () {
            return {
                Model: null,
                rating: 0
            }
        },
        created() {
            this.Model = @Json.Serialize(Model);
        },
        watch: {
            Model: function() {
                const RatingSum = this.Model.RatingSum;
                const TotalReviews = this.Model.TotalReviews;
                this.rating = RatingSum / TotalReviews;
            }
        }
    })
</script>
