Cacher is the code snippet organizer for pro developers

<mvt:if expr="g.GD_Ratings:Reviewed GT 0">
    Thank you for your review!
</mvt:if>

<div id="gd-reviews-cont">
    <div class="gd-reviews-title">
        <h3>Customer Ratings &amp; Reviews</h3>
    </div>

    <mvt:if expr="l.settings:product:gd_ratings:total GT 0">
        <div class="gd-row">
            <div class="gd-large6 gd-column gd-column-breakdown">
                <mvt:item name="gd_ratings" param="stars" />

                <div class="gd-row">
                    <div class="gd-review-overall">
                        <div class="gd-review-overall-rating">&mvt:product:gd_ratings:rating;</div>
                        <div class="gd-review-overall-info">out of 5</div>
                    </div>
                    <div class="gd-review-stars-breakdown">
                        <mvt:foreach iterator="breakdown" array="product:gd_ratings:breakdown">
                            <div class="gd-review-star-breakdown">
                                &mvt:breakdown:overall; <i class="fa fa-&mvt:gd_ratings:config:fa_star;"></i>
                                <span class="gd-review-breakdown-indicator">
                                    <span class="gd-review-breakdown-value" style="width: &mvt:breakdown:perc;;"></span>
                                </span>
                                (&mvt:breakdown:count;)
                            </div>
                        </mvt:foreach>
                    </div>
                </div>
            </div>
            <div class="gd-large6 gd-column gd-column-additional-breakdown">
                <div class="gd-review-additional-breakdowns-cont">
                    <mvt:foreach iterator="add_breakdown" array="product:gd_ratings:additional_breakdown">
                        <div class="gd-review-additional-breakdown">
                            <span class="gd-review-additional-breakdown-name">&mvt:add_breakdown:name;</span>
                            <span class="gd-review-breakdown-indicator">
                                <span class="gd-review-breakdown-value" style="width: &mvt:add_breakdown:perc;;"></span>
                            </span>
                            <span class="gd-review-additional-breakdown-average">&mvt:add_breakdown:average;</span>
                        </div>
                    </mvt:foreach>
                </div>
                <div class="gd-review-would-recommend-cont">
                    <span>Would recommend this product.</span>

                    <div class="gd-review-would-recommend-indicator">
                            <div class="gd-review-would-recommend-value" style="width: &mvt:product:gd_ratings:recommend:perc;;"></div>
                        <div class="gd-review-would-recommend-text-value">
                            &mvt:product:gd_ratings:recommend:perc;
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="gd-reviews-pagination gd-reviews-pagination-top">
            <div class="gd-reviews-pagination-total">
                &mvt:product:gd_ratings:total; Total Reviews
            </div>
            <mvt:if expr="l.settings:product:gd_ratings:pagination:total GT 1">
                <ul class="gd-reviews-pagination-nav">
                    <mvt:if expr="NOT ISNULL l.settings:product:gd_ratings:pagination:previous">
                        <li>
                            <a href="&mvt:global:sessionurl;Screen=PROD&amp;Product_Code=&mvte:product:code;&amp;GD_Ratings:Sort=&mvte:global:GD_Ratings:Sort;&amp;GD_Ratings:Offset=&mvt:product:gd_ratings:pagination:previous;">
                                &laquo;
                            </a>
                        </li>
                    </mvt:if>
                    <mvt:foreach iterator="offset" array="product:gd_ratings:pagination:offsets">
                        <mvt:if expr="l.settings:offset:page EQ l.settings:product:gd_ratings:pagination:current_page">
                            <li class="active">&mvt:offset:page;</li>
                        <mvt:else>
                            <li class="">
                                <a href="&mvt:global:sessionurl;Screen=PROD&amp;Product_Code=&mvte:product:code;&amp;GD_Ratings:Sort=&mvte:global:GD_Ratings:Sort;&amp;GD_Ratings:Offset=&mvt:offset:offset;">
                                    &mvt:offset:page;
                                </a>
                            </li>
                        </mvt:if>
                    </mvt:foreach>
                    <mvt:if expr="NOT ISNULL l.settings:product:gd_ratings:pagination:next">
                        <li>
                            <a href="&mvt:global:sessionurl;Screen=PROD&amp;Product_Code=&mvte:product:code;&amp;GD_Ratings:Sort=&mvte:global:GD_Ratings:Sort;&amp;GD_Ratings:Offset=&mvt:product:gd_ratings:pagination:next;">
                                &raquo;
                            </a>
                        </li>
                    </mvt:if>
                </ul>
            </mvt:if>
            <div class="gd-reviews-pagination-sort">
                <form action="&mvt:global:sessionurl;">
                    <input type="hidden" name="Screen" value="PROD" />
                    <input type="hidden" name="Product_Code" value="&mvte:product:code;" />
                    <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />

                    <select name="GD_Ratings:Sort">
                        <mvt:if expr="g.GD_Ratings:Sort EQ 'newest'">
                            <option value="newest" selected="selected">Newest</option>
                        <mvt:else>
                            <option value="newest">Newest</option>
                        </mvt:if>

                        <mvt:if expr="g.GD_Ratings:Sort EQ 'oldest'">
                            <option value="oldest" selected="selected">Oldest</option>
                        <mvt:else>
                            <option value="oldest">Oldest</option>
                        </mvt:if>

                        <mvt:if expr="g.GD_Ratings:Sort EQ 'highest'">
                            <option value="highest" selected="selected">Highest Rated</option>
                        <mvt:else>
                            <option value="highest">Highest Rated</option>
                        </mvt:if>

                        <mvt:if expr="g.GD_Ratings:Sort EQ 'lowest'">
                            <option value="lowest" selected="selected">Lowest Rated</option>
                        <mvt:else>
                            <option value="lowest">Lowest Rated</option>
                        </mvt:if>
                    </select>

                    <button type="submit">GO</button>
                </form>
            </div>
        </div>

        <div class="gd-reviews">
            <mvt:foreach iterator="review" array="product:gd_ratings:reviews">
                <div class="gd-review">
                    <div class="gd-row">
                        <div class="gd-large7 gd-column">
                            <div class="gd-review-title">
                                &mvt:review:title;
                            </div>

                            <div class="gd-rating-stars-disp">
                                <i class="fa fa-&mvt:gd_ratings:config:fa_star;"></i>
                                <i class="fa fa-&mvt:gd_ratings:config:fa_star;"></i>
                                <i class="fa fa-&mvt:gd_ratings:config:fa_star;"></i>
                                <i class="fa fa-&mvt:gd_ratings:config:fa_star;"></i>
                                <i class="fa fa-&mvt:gd_ratings:config:fa_star;"></i>

                                <div class="gd-rating-stars" style="width: &mvt:review:overall_perc;;">
                                    <i class="fa fa-&mvt:gd_ratings:config:fa_star;"></i>
                                    <i class="fa fa-&mvt:gd_ratings:config:fa_star;"></i>
                                    <i class="fa fa-&mvt:gd_ratings:config:fa_star;"></i>
                                    <i class="fa fa-&mvt:gd_ratings:config:fa_star;"></i>
                                    <i class="fa fa-&mvt:gd_ratings:config:fa_star;"></i>
                                </div>
                                <span class="gd-review-overall">
                                    &mvt:review:overall; out of 5
                                </span>
                            </div>

                            <div class="gd-review-user">
                                <div class="gd-review-user-nickname">
                                    &mvt:review:user:nickname;
                                </div>
                                <div class="gd-review-user-location">
                                    <strong>Location:</strong> &mvt:review:user:location;
                                </div>
                                <div class="gd-review-date">
                                    <strong>Date:</strong> <mvt:item name="gd_ratings" param="date_format|F d, Y|l.all_settings:review:created_at" />
                                </div>
                            </div>

                            <div class="gd-review-summary"> 
                                &mvt:review:summary;
                            </div>

                            <div class="gd-review-actions">
                                <mvt:if expr="l.settings:review:order_id GT 0">
                                    <span class="gd-verified-buyer">
                                        <i class="fa fa-check-circle"></i>
                                        Verified Buyer
                                    </span>
                                </mvt:if>
                                <mvt:if expr="l.settings:review:recommended">
                                    <span class="gd-review-recommended">
                                        <i class="fa fa-bullhorn"></i>
                                        Recommended
                                    </span>
                                </mvt:if>
                            </div>
                        </div>
                        <div class="gd-large5 gd-column">
                            <div class="gd-review-additional-breakdowns-cont">
                                <mvt:foreach iterator="additional" array="review:additional">
                                    <div class="gd-review-additional-breakdown">
                                        <span class="gd-review-additional-breakdown-name">&mvt:additional:name;</span>
                                        <span class="gd-review-breakdown-indicator">
                                            <span class="gd-review-breakdown-value" style="width: &mvt:additional:perc;;"></span>
                                        </span>
                                        <span class="gd-review-additional-breakdown-value">&mvt:additional:value;</span>
                                    </div>
                                </mvt:foreach>
                            </div>
                        </div>
                    </div>
                </div>
            </mvt:foreach>
        </div>
        <div class="gd-reviews-pagination gd-reviews-pagination-bottom">
            <div class="gd-reviews-pagination-total">
                &mvt:product:gd_ratings:total; Total Reviews
            </div>
            <mvt:if expr="l.settings:product:gd_ratings:pagination:total GT 1">
                <ul class="gd-reviews-pagination-nav">
                    <mvt:if expr="NOT ISNULL l.settings:product:gd_ratings:pagination:previous">
                        <li>
                            <a href="&mvt:global:sessionurl;Screen=PROD&amp;Product_Code=&mvte:product:code;&amp;GD_Ratings:Sort=&mvte:global:GD_Ratings:Sort;&amp;GD_Ratings:Offset=&mvt:product:gd_ratings:pagination:previous;">
                                &laquo;
                            </a>
                        </li>
                    </mvt:if>
                    <mvt:foreach iterator="offset" array="product:gd_ratings:pagination:offsets">
                        <mvt:if expr="l.settings:offset:page EQ l.settings:product:gd_ratings:pagination:current_page">
                            <li class="active">&mvt:offset:page;</li>
                        <mvt:else>
                            <li class="">
                                <a href="&mvt:global:sessionurl;Screen=PROD&amp;Product_Code=&mvte:product:code;&amp;GD_Ratings:Sort=&mvte:global:GD_Ratings:Sort;&amp;GD_Ratings:Offset=&mvt:offset:offset;">
                                    &mvt:offset:page;
                                </a>
                            </li>
                        </mvt:if>
                    </mvt:foreach>
                    <mvt:if expr="NOT ISNULL l.settings:product:gd_ratings:pagination:next">
                        <li>
                            <a href="&mvt:global:sessionurl;Screen=PROD&amp;Product_Code=&mvte:product:code;&amp;GD_Ratings:Sort=&mvte:global:GD_Ratings:Sort;&amp;GD_Ratings:Offset=&mvt:product:gd_ratings:pagination:next;">
                                &raquo;
                            </a>
                        </li>
                    </mvt:if>
                </ul>
            </mvt:if>
            <div class="gd-reviews-pagination-sort">
                <form action="&mvt:global:sessionurl;">
                    <input type="hidden" name="Screen" value="PROD" />
                    <input type="hidden" name="Product_Code" value="&mvte:product:code;" />
                    <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />

                    <select name="GD_Ratings:Sort">
                        <mvt:if expr="g.GD_Ratings:Sort EQ 'newest'">
                            <option value="newest" selected="selected">Newest</option>
                        <mvt:else>
                            <option value="newest">Newest</option>
                        </mvt:if>

                        <mvt:if expr="g.GD_Ratings:Sort EQ 'oldest'">
                            <option value="oldest" selected="selected">Oldest</option>
                        <mvt:else>
                            <option value="oldest">Oldest</option>
                        </mvt:if>

                        <mvt:if expr="g.GD_Ratings:Sort EQ 'highest'">
                            <option value="highest" selected="selected">Highest Rated</option>
                        <mvt:else>
                            <option value="highest">Highest Rated</option>
                        </mvt:if>

                        <mvt:if expr="g.GD_Ratings:Sort EQ 'lowest'">
                            <option value="lowest" selected="selected">Lowest Rated</option>
                        <mvt:else>
                            <option value="lowest">Lowest Rated</option>
                        </mvt:if>
                    </select>

                    <button type="submit">GO</button>
                </form>
            </div>
        </div>
    <mvt:else>
        <p>Be the first to rate this item!</p> 
        <p><a href="&mvt:gd_ratings:protocol_relative_url;Screen=GD_WREVIEW&Product_Code=&mvte:product:code;" class="gd-rating-review-link" rel="nofollow">Write Review</a></p>
    </mvt:if>
</div>