<div class="reviews">
  <input type="hidden" id="reviews-values" value="{{ count_reviews }}">
  {% if reviews %}
    <div class="bottom-margin-large text-center">
      <span class="heading-2">{{ heading_title }} </span>
      <a class="js-toggle left-margin-medium text-small text-primary {{ total_reviews > 5 ? '' : 'hidden' }}" href="">Ver Todos</a>
    </div>
    {% set carousel = reviews|slice(0,5) %}
    <div id="reviews-carousel" class="reviews-container ease-effect carousel-container">
      <div class="carousel-wrapper invisible-scrollbar">
        <div class="carousel-list bottom-padding-large">
          {% for review in carousel %}
            <div class="review-column col-xs-12 {{ total_reviews >= 3 ? 'col-md-4' : 'col-md-6' }}">
              <div class="review-box shadow-medium" title="{{ review_tip }}">
                <div class="review-container bottom-margin-medium text-break-word hidden-overflow">
                  <span class="review-author text-large text-dark text-capitalize  bottom-margin-x-small">{{ review.author }}</span>
                  <div class="review-rating vertical-middle">
                    {% for i in 1..5 %}
                      <i class="far fa-star text-medium active_star{{ review.rating }}" aria-hidden="true"></i>
                    {% endfor %}
                  </div>
                  <span class="review-date text-small text-gray left-margin-x-small bottom-margin-small">{{ review.date_added }}</span>
                  <div class="review-comment top-margin-small" data-text="{{ review.text }}">
                    <span class="text-medium text-dark">
                      {{ review.text }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
      {% if total_reviews > 3 %}
        <button class="control prev linear-effect"><i class="fas fa-angle-left"></i></button>
        <button class="control next linear-effect"><i class="fas fa-angle-right"></i></button>
      {% endif %}
    </div>
    <div id="reviews-pages" class="reviews-container ease-effect hidden" data-total-reviews="{{ total_reviews }}" data-reviews-per-page="{{ reviews_per_page }}">
      <div id="reviews-content">
        {{ page_reviews }}
      </div>
      {% if (total_reviews - reviews_per_page) > 0 %}
        <div class="more-reviews middle-xs text-center">
          <button type="button" class="btn-more-reviews btn-default btn-small-square btn-outline">
            <span>Ver mais</span>
          </button>
          <div class="js-loading-reviews full-width text-center vertical-padding-large hidden">
            <img src="assets/img/loading-black.svg" width="40" height="40">
          </div>
        </div>
      {% endif %}
    </div>
    <div id="reviews-modal-overlay" class="flex middle-xs center-xs center-middle-fixed full-width full-height overlay-black-6 hidden" style="z-index:115">
      <div id="reviews-modal" class="reviews-modal background-white shadow-large rounded-x-small hidden-overflow">
        <button class="js-close-modal btn-small-square btn-default pull-right padding-small">
          <i class="fas fa-times"></i>
        </button>
        <div id="reviews-modal-content" class="reviews-modal-content"></div>
      </div>
    </div>
  {% else %}
    <div class="text-medium text-gray">{{ text_no_reviews }}</div>
  {% endif %}
</div>