<style id="jsbin-css">
.limit-lines {
    margin-top: 1.24em !important;
    display: block;
    /* or inline-block */
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 6em;
    line-height: 1.5em;
}

.card-papa {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.card-papa .card-panel {
    background: rgba(0, 92, 151, .8);
    background: -webkit-linear-gradient(to right, rgba(55, 67, 117, .8), rgba(0, 92, 151, .8));
    background: linear-gradient(to right, rgba(55, 67, 117, .8), rgba(0, 92, 151, .8));
}

.trending-container {
    width: 90% !important;
    margin: .2em auto;
}
</style>
<div class="browse reviews blue-grey lighten-4">
        <div class="white black-text">
            <p>
                <%= JSON.stringify(trending , null, 4)%>
            </p>
            <h5>
                No. of trending reviews overall:
                <%= trending.length %>
            </h5>
            <h5>
                No. of reviews having image:
                <% for(var i=0,ll=0; i<trending.length; i++){if (trending[i].images.length>0) ll++}  %>
                    <%= ll %>
            </h5>


        </div>

        <% function rColor(){ %>
            <% var colors = ['blue', 'indigo', 'blue-grey', 'deep-purple'] %>
            <% var rand = Math.random(), toReturn = '' %>
            <% if (rand < .25) {%>
                <% toReturn = colors[0] %>
            <%} else if ((rand >= .25) && (rand < .5)) {%>
                <% toReturn = colors[1] %>
            <%} else if ((rand >= .5) && (rand < .75)) {%>
                <% toReturn = colors[2] %>
            <%} else if ((rand >= .75) && (rand < 1)) {%>
                <% toReturn = colors[3] %>
            <%} return toReturn %>
        <% } %>

        <h5 class="center black-text"><i class="fa fa-fire red-text text-darken-4"></i>&nbsp;Trending Reviews</h5>
        <div class="trending-container">
            <div class="owl-carousel owl-theme">

            <% trending.forEach(review =>{ %>
                <% var bg = '', hasImage = false %>
                <% if (review.images.length > 0 ) {%>
                    <% bg = 'style="background:url(\''+review.images[0]+'\')"' %>
                    <% hasImage = true %>
                <%} else {%>
                    <% bg = rColor() %>
                    <% hasImage = false %>
                <%}%>


                <div class="item card <%= hasImage ? 'card-papa' : '' %>" <%= hasImage ? bg : ''%>>
                    <div class="card-panel darken-4 <%= !hasImage ? bg : '' %> ">
                        <strong><%= review.titleReview %></strong>
                        <a href="#" class="white-text br-author"><%= review.userInfo.username +'(' + review.userInfo.reps + ')' %></a>
                        <span role="presentation" aria-hidden="true"> · </span>
                        <a href="" class="white-text tooltipped" data-tooltip="written <%= review.fromNow %>"><i class="fa fa-globe"></i></a>
                        <div class="right">
                            <i class="fa fa-eye"></i> 232
                            <span role="presentation" aria-hidden="true">&middot;</span>
                            <i class="fa fa-thumbs-up"></i> <%= review.useful.length %>
                            <span role="presentation" aria-hidden="true">&middot;</span>
                            <i class="fa fa-thumbs-down"></i> <%= review.notUseful.length %>
                        </div>
                        <div class="clearfix"></div>
                        <span class="browserate" data-rateyo-rating="<%=review.overall%>" data-rateyo-rated-fill="#ff8f00"></span>
                        <span class="white-text limit-lines"><%= review.reviewText %></span>...
                        <div class="divider"></div>
                        <div class="card-action">
                            <a class="btn btn-flat left indigo-text"><span class="text-lighten-4 amber-text"><%= review.companyName %></span></a>
                            <a href="#" class="btn btn-flat darken-4 waves-effect waves-dark right white-text">Read</a>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>

            <% }) %>


        </div>
    </div>
<script id="jsbin-source-html" type="text/html">    <div class="browse reviews blue-grey lighten-4">
        <div class="white black-text">
            <p>
                <%= JSON.stringify(trending , null, 4)%>
            </p>
            <h5>
                No. of trending reviews overall:
                <%= trending.length %>
            </h5>
            <h5>
                No. of reviews having image:
                <% for(var i=0,ll=0; i<trending.length; i++){if (trending[i].images.length>0) ll++}  %>
                    <%= ll %>
            </h5>


        </div>

        <% function rColor(){ %>
            <% var colors = ['blue', 'indigo', 'blue-grey', 'deep-purple'] %>
            <% var rand = Math.random(), toReturn = '' %>
            <% if (rand < .25) {%>
                <% toReturn = colors[0] %>
            <%} else if ((rand >= .25) && (rand < .5)) {%>
                <% toReturn = colors[1] %>
            <%} else if ((rand >= .5) && (rand < .75)) {%>
                <% toReturn = colors[2] %>
            <%} else if ((rand >= .75) && (rand < 1)) {%>
                <% toReturn = colors[3] %>
            <%} return toReturn %>
        <% } %>

        <h5 class="center black-text"><i class="fa fa-fire red-text text-darken-4"></i>&nbsp;Trending Reviews</h5>
        <div class="trending-container">
            <div class="owl-carousel owl-theme">

            <% trending.forEach(review =>{ %>
                <% var bg = '', hasImage = false %>
                <% if (review.images.length > 0 ) {%>
                    <% bg = 'style="background:url(\''+review.images[0]+'\')"' %>
                    <% hasImage = true %>
                <%} else {%>
                    <% bg = rColor() %>
                    <% hasImage = false %>
                <%}%>


                <div class="item card <%= hasImage ? 'card-papa' : '' %>" <%= hasImage ? bg : ''%>>
                    <div class="card-panel darken-4 <%= !hasImage ? bg : '' %> ">
                        <strong><%= review.titleReview %></strong>
                        <a href="#" class="white-text br-author"><%= review.userInfo.username +'(' + review.userInfo.reps + ')' %></a>
                        <span role="presentation" aria-hidden="true"> · </span>
                        <a href="" class="white-text tooltipped" data-tooltip="written <%= review.fromNow %>"><i class="fa fa-globe"></i></a>
                        <div class="right">
                            <i class="fa fa-eye"></i> 232
                            <span role="presentation" aria-hidden="true">&middot;</span>
                            <i class="fa fa-thumbs-up"></i> <%= review.useful.length %>
                            <span role="presentation" aria-hidden="true">&middot;</span>
                            <i class="fa fa-thumbs-down"></i> <%= review.notUseful.length %>
                        </div>
                        <div class="clearfix"></div>
                        <span class="browserate" data-rateyo-rating="<%=review.overall%>" data-rateyo-rated-fill="#ff8f00"></span>
                        <span class="white-text limit-lines"><%= review.reviewText %></span>...
                        <div class="divider"></div>
                        <div class="card-action">
                            <a class="btn btn-flat left indigo-text"><span class="text-lighten-4 amber-text"><%= review.companyName %></span></a>
                            <a href="#" class="btn btn-flat darken-4 waves-effect waves-dark right white-text">Read</a>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>

            <% }) %>


        </div>
    </div></script>

<script id="jsbin-source-css" type="text/css">.limit-lines {
    margin-top: 1.24em !important;
    display: block;
    /* or inline-block */
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 6em;
    line-height: 1.5em;
}

.card-papa {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.card-papa .card-panel {
    background: rgba(0, 92, 151, .8);
    background: -webkit-linear-gradient(to right, rgba(55, 67, 117, .8), rgba(0, 92, 151, .8));
    background: linear-gradient(to right, rgba(55, 67, 117, .8), rgba(0, 92, 151, .8));
}

.trending-container {
    width: 90% !important;
    margin: .2em auto;
}
</script>