@model ProductReviewOverviewModel
@using System.Globalization
@{
    int ratingPercent = 0;
    if (Model.TotalReviews != 0)
    {
        ratingPercent = ((Model.RatingSum * 100) / Model.TotalReviews) / 5;
    }
}
<div class="product-reviews-overview d-inline-flex align-items-center flex-wrap" @if (Model.TotalReviews > 0)
{ <text> itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" </text> }>
    <div class="product-review-box d-inline-block order-1">
        <div class="rating">
            <b-form-rating id="rating-inline-overview-@Model.ProductId" class="p-0" variant="warning" no-border size="sm" show-value precision="2" readonly inline v-model="productreviewsoverview.rating"></b-form-rating>
            <template v-if="productreviewsoverview.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__">
                        {{productreviewsoverview.Model.TotalReviews}}
                        @Loc["Reviews.Overview.Reviews"]
                    </b-button>
                </div>
            </template>
            <template v-else>
                <div class="product-no-reviews order-3">
                    <a class="btn btn-sm btn-outline-info"  @@click="productreviews.addProductReview()">
                        @Loc["Reviews.Overview.First"]
                    </a>
                </div>
            </template>
            @{ 
                @* rendering microdata info*@
                double value = ratingPercent / (double)20;
                <span itemprop="ratingValue" class="d-none">(@value.ToString("0.0", new CultureInfo("en-US")))</span>
                <span itemprop="reviewCount" class="d-none">@Model.TotalReviews</span>
            }
        </div>
    </div>
</div>
<script asp-location="Footer" asp-order="300">
    var productreviewsoverview = 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>
