{% if reviewgraph %}
  <style type="text/css">
    {% if reviewgraph_color %}
    #cireview-graph .progress .progress-bar {
      background-color: {{ reviewgraph_color }};
    }
    #cireview-graph .cireview-stars .fa-star, #cireview-graph .cireview-stars .fa-star + .fa-star-o {
      color: {{ reviewgraph_color }};
    }
    {% endif %}
  </style>

  {% if reviewgraph_option == 'PROGRESSBAR' %}
    <div class="cireview-bars">
      {% if reviewgraph_recommend %}<p class="cireview-recommendation text-center">{{ text_recommendation }}</p>{% endif %}
      <ul class="list-unstyled">
        {% for ratingreview in ratingreviews %}
          <li class="cirating-filter" data-cirating="{{ ratingreview.reviewrating }}">
            {% if reviewgraph_text %}<div class="n-star">{{ ratingreview.reviewrating }} <i class="fa fa-star-o"></i> {{ ratingreview.text_rating }}</div>{% endif %}
            <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="{{ ratingreview.percent }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ ratingreview.percent }}%"></div>
            </div>
            <div class="progress-value">{{ ratingreview.percent }}%</div>
          </li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
  {% if reviewgraph_option == 'RATINGSTARS' %}
    <div class="cireview-stars">
      {% if reviewgraph_recommend %}<p class="cireview-recommendation text-center">{{ text_recommendation }}</p>{% endif %}
      <ul class="list-unstyled rating">
        {% for ratingreview in ratingreviews %}
          <li class="cirating-filter" data-cirating="{{ ratingreview.reviewrating }}">
            {% if reviewgraph_text %}<div class="n-star">{{ ratingreview.reviewrating }} {{ ratingreview.text_rating }}</div>{% endif %}
            <div class="rating-stars">
              {% for i in 1..5 %}
                {% if ratingreview.reviewrating < i %}
                  <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                {% else %}
                  <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                {% endif %}
              {% endfor %}
            </div>
            <div class="rating-value">{{ ratingreview.percent }}%</div>
          </li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
{% endif %}