<div {{ attributes.defaults(stimulus_controller(this.shortName)) }}>
   {% if this.reviews|length %}
      <div id="heureka-reviews"
            {% if this.reviews|length > 1 and this.is_carousel %}
               {{ stimulus_target(this.shortName, 'slider') }}
            {% endif %}
            {% if this.reviews|length > 1 and this.has_controls %} data-controls="true"{% endif %}
            {% if this.has_nav %} data-nav="true"{% endif %}
           data-number-of-slides="{{ this.number_of_slides }}"
           data-gap-between-sliders="{{ this.gap_between_sliders }}"
           data-is-loop="{{ this.is_loop ? 'true' : 'false' }}"
           data-is-autoplay="{{ this.is_autoplay ? 'true' : 'false' }}"
      >
         {% for review in this.reviews %}
            <div class="review inner-item">
               <div class="review-content">
                  <p class="review-summary">{{ review.summary }}</p>
                  <div class="review-name-wrapper">
                     <div class="review-stars" title="{{ review.total_rating }}">
                        {% for i in 1..5 %}
                           <twig:ux:icon name="star" class="c-icon{{ i <= review.total_rating|round(0, 'floor') ? ' active' : '' }}"/>
                        {% endfor %}
                     </div>
                     <span class="review-name">{{ review.name ?? 'Ověřený zákazník' }}</span>
                  </div>
                  <p class="review-date">{{ review.unix_timestamp|format_date }}</p>
               </div>
            </div>
         {% endfor %}
      </div>

      {% if this.reviews|length > 1 and this.has_controls %}
         <div class="tns-controls" {{ stimulus_target(this.shortName, 'controlls') }}>
            <button class="btn">
               <twig:ux:icon name="{{ this.arrows[0] }}"/>
            </button>
            <button class="btn">
               <twig:ux:icon name="{{ this.arrows[1] }}"/>
            </button>
         </div>
      {% endif %}
   {% endif %}
</div>
