{%- 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="grid center_item_slider" id="item-{{ section.id }}"
           data-slick='{"slidesToShow": 3,
                       "slidesToScroll": 1,
                       "autoplay": true,
                       "arrows": true,
                       "infinite": true
                       }'
           >
        {% for block in section.blocks %}
        <div class="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%;" data-image-loading-animation>
                  <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%;" data-image-loading-animation>
                  <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>


{% schema %}
{
  "name": "Avaliações dos clientes",
  "class": "index-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Cabeçalho",
      "default": "Opiniões dos clientes"
    },
    {
      "type": "image_picker",
      "id": "star_img",
      "label": "Imagem de avaliação"
    },
    {
      "type": "text",
      "id": "content",
      "label": "Conteúdo",
      "default": "4.9 de 5"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Fundo",
      "default": "#F7F7F7"
    }
  ],
  "blocks": [
    {
      "type": "customer",
      "name": "Cliente",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Foto"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Nome",
          "default": "Nome"
        },
        {
          "type": "textarea",
          "id": "content",
          "label": "Avaliação",
          "default": "“Incrível! Frete rápido! Indiquei para meus amigos. Consegui ótimos resultados!”"
        },
        {
          "type": "image_picker",
          "id": "product_image",
          "label": "Imagem do produto"
        },
        {
          "type": "text",
          "id": "product_name",
          "label": "Nome do produto",
          "default": "Produto 1"
        },
        {
          "type": "image_picker",
          "id": "star_img",
          "label": "Imagem de avaliação"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Avaliações dos clientes",
      "category": "astron"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
