{%- case section.blocks.size -%}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}

<div class="customer_reviews_container" style="background-color: {{ section.settings.bg_color }};">
  <div class="page-width">
    {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>
      {% if section.settings.title != blank %}
      <p class="content">
        {% if section.settings.star_img != blank %}
        <img class="lazyload" data-src="{{ section.settings.star_img | img_url: 'x15' }}" width="90" height="15" alt="star">
        {% endif %}
        {{ section.settings.content }}
      </p>
      {% endif %}
    </div>
    {% endif %}
    <div class="section_content">
      <div class="swiper-container"
           data-swiper='{
                          "slidesPerView": 4,
                          "centeredSlides": true,
                          "loop": true,
                          "autoplay": {"delay": 2000},
                          "speed": 1000,
                          "navigation": {
                            "nextEl": ".swiper-button-next-{{ section.id }}",
                            "prevEl": ".swiper-button-prev-{{ section.id }}"
                          },
                          "breakpoints": {
                            "991": {
                        	  "slidesPerView": 4,
                              "centeredSlides": true
                            },
                        	 "768": {
                        	  "slidesPerView": 3,
                              "centeredSlides": true
                            },
                            "641": {
                              "slidesPerView": 2,
                              "centeredSlides": false
                            },
                            "0": {
                              "slidesPerView": 1
                            }
                          }
                        }'
           >
        <div class="swiper-wrapper grid">
          {% for block in section.blocks %}
          <div class="swiper-slide grid__item {{ grid_item_width }}">
            <div class="review_content">
              <div class="review_top">
                <div class="customers_img">
                  {% if block.settings.image != blank %}
                  <div style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%; position: relative; width: 100%;">
                    <img id="img{{ section.id }}"
                         class="feature-row__image lazyload"
                         data-src="{{ block.settings.image | img_url: 'master' }}"
                         data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                         data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                         data-sizes="auto"
                         alt="{{ block.settings.image.alt | escape }}"
                         style="position: absolute; top: 0;">
                  </div>
                  {% else %}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {% endif %}
                </div>

                {% if block.settings.title != blank %}
                <div class="customers_name">{{ block.settings.title }}</div>
                {% endif %}
                {% if block.settings.content != blank %}
                <div class="review_content">
                  {{ block.settings.content }}
                </div>
                {% endif %}
              </div>
              <div class="review_bottom">
                <div class="product_img">
                  {% if block.settings.product_image != blank %}
                  <div style="padding-top:{{ 1 | divided_by: block.settings.product_image.aspect_ratio | times: 100}}%; position: relative; width: 100%;">
                    <img id="img{{ block.id }}"
                         class="feature-row__image lazyload"
                         data-src="{{ block.settings.product_image | img_url: 'master' }}"
                         data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                         data-aspectratio="{{ block.settings.product_image.aspect_ratio }}"
                         data-sizes="auto"
                         alt="{{ block.settings.product_image.alt | escape }}"
                         style="position: absolute; top: 0;">
                  </div>
                  {% else %}
                  {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                  {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  {% endif %}
                </div>
                <div class="product_center">
                  {% if block.settings.product_name != blank %}
                  <div class="product_name">Bandana Bibs</div>
                  {% endif %}
                  {% if block.settings.star_img != blank %}
                  <div class="review_star">
                    <img class="lazyload" data-src="{{ block.settings.star_img | img_url: 'x15' }}" width="90" height="15" alt="star">
                  </div>
                  {% endif %}
                </div>
                <div class="product_right">
                  {% include 'icon-right-arrow' %}
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<style type="text/css">
  .customer_reviews_container .section_content .grid .grid__item .review_content .review_bottom { background: {{ section.settings.product_bg_color }};}
  .customer_reviews_container .section_content .grid .grid__item .review_content .review_bottom .product_center .product_name { color: {{ section.settings.product_text_color }};}
  .customer_reviews_container .section_content .grid .grid__item .review_content .review_bottom .product_right svg { fill: {{ section.settings.product_text_color }}; }
  .customer_reviews_container .section_content .grid .grid__item .review_content .review_bottom .product_img { border: 1px solid {{ section.settings.product_bg_color }};}
  .customer_reviews_container .section_content .grid .slick-dots li.slick-active a:before, .customer_reviews_container .section_content .grid .slick-dots li.slick-active button:before { color: {{ section.settings.product_bg_color }};}

</style>


{% schema %}
  {
    "name": "Avaliações dos clientes",
	"class": "index-section",
    "settings": [
		{
			"type": "text",
			"id": "title",
			"label": "Título",
			"default": "Avaliações dos clientes"
		},
		{
			"type": "image_picker",
			"id": "star_img",
			"label": "Imagem da avaliação"
		},
		{
			"type": "text",
			"id": "content",
			"label": "Conteúdo",
			"default": "4.9 out of 5"
		},
		{
			"type": "color",
			"id": "bg_color",
			"label": "Cor de fundo",
			"default": "#F7F7F7"
		},
		{
			"type":"header",
			"content":"Cor de fundo do produto"
		},
		{
			"type":"color",
			"id":"product_bg_color",
			"label":"Cor de fundo"
		},
		{
			"type":"color",
			"id":"product_text_color",
			"label":"Cor do texto"
		}
	],
	"blocks": [
		{
			"type": "customer",
			"name": "Conteúdo",
			"settings": [
				{
					"type": "image_picker",
					"id": "image",
					"label": "Customer image",
					"info":"Tamanho da imagem 148 X 148"
				},
				{
					"type": "text",
					"id": "title",
					"label": "Nome do cliente",
					"default": "Name"
				},
				{
					"type": "textarea",
					"id": "content",
					"label": "Descrição do cliente",
					"default": "“Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud Lorem ipsume dolor sit aroung at amet.”"
				},
				{
					"type": "image_picker",
					"id": "product_image",
					"label": "Imagem do produto",
					"info":"Tamanho da imagem 100 X 100"
				},
				{
					"type": "text",
					"id": "product_name",
					"label": "Nome do produto",
					"default": "Lorem ipsum"
				},
				{
					"type": "image_picker",
					"id": "star_img",
					"label": "Imagem da avaliação"
				}
			]
		}
	],
	"presets": [
		{
			"name": "Avaliações dos clientes com produto",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
