{% if store_ratings and store_rating_module_status %}
<section class="store-rating vertical-padding-x-large">
  <div class="carousel-container slider-store-rating">
    <div class="carousel-wrapper grid">
      <div class="carousel-list">
        {% for rating in store_ratings %}
          <div class="item-column">
            <div class="paper full-height padding-large text-medium text-center">
              <div>
                <i class="far fa-star active_star{{ rating.rating }}"></i>
                <i class="far fa-star active_star{{ rating.rating }}"></i>
                <i class="far fa-star active_star{{ rating.rating }}"></i>
                <i class="far fa-star active_star{{ rating.rating }}"></i>
                <i class="far fa-star active_star{{ rating.rating }}"></i>
              </div>
              <p class="vertical-margin-medium"><i>"{{ rating.text }}"</i></p>
              <p>{{ rating.author }}</p>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
  <script>
  window.waitEvent('scripts_window', function() {
    $('.slider-store-rating').carousel({
      resposive: true,
      minWidthItems: 520,
      storeRating: true,
    });
  });
  </script>
{% endif %}
