<div class="home_customer_love_section">
  <div class="page-width">
    {% if section.settings.title != blank or section.settings.sub_title != blank or section.settings.short_desc != blank %}
    <div class="section-header text-center">
      {% if section.settings.title != blank %}
      <h1>{{ section.settings.title | escape }}</h1>
      {% endif %}
      {% if section.settings.sub_title != blank %}
      <h3>{{ section.settings.sub_title }}</h3>
      {% endif %}
      {% if section.settings.short_desc != blank %}
      <p><img class="lazyload" data-src="{{ section.settings.star_image | img_url: '85x15' }}" alt="" />{{ section.settings.short_desc }}</p>
      {% endif %}
    </div>
    {% endif %}
    <div class="review_section_container">
      {% if section.blocks.size > 0 %}
      <ul class="review_items">
        {% for block in section.blocks %}
        <li>
          <div class="review_content">
            <div class="top_content">
              <div class="left_img">
                <div class="name_image">
                  {% if block.settings.client_image != blank %}
                  <img class="lazyload" data-src="{{ block.settings.client_image | img_url: 'master' }}" alt="" />
                  {% endif %}
                  <div class="name_text">
                    {% if block.settings.title != blank %}
                    <h4>{{ block.settings.title }}</h4>
                    {% endif %}
                    {% if block.settings.short_desc != blank %}
                    <p>{{ block.settings.short_desc }}</p>
                    {% endif %}
                  </div>
                </div>
              </div>
              <div class="review_star">
                {% if block.settings.star_image != blank %}
                <img class="lazyload" data-src="{{ block.settings.star_image | img_url: '85x15' }}" alt="" />
                {% endif %}
                {% if block.settings.rating != blank %}
                <p>({{ block.settings.rating }})</p>
                {% endif %}
              </div>
            </div>
            <div class="bottom_comment">
              {% if block.settings.message != blank %}
              <div class="comments">
                {{ block.settings.message }}
              </div>
              {% endif %}
            </div>
          </div>
        </li>
        {% endfor %}
      </ul>
      {% endif %}
    </div>
  </div>
</div>



{% schema %}
  {
    "name": "Nossos clientes nos amam",
    "settings": [
		{
          "type": "text",
          "id": "title",
          "label": "Título",
          "default": "Nossos clientes nos amam"
    	},
		{
          "type": "text",
          "id": "sub_title",
          "label": "Subtítulo",
          "default": "(e nós amamos eles!)"
    	},
		{
          "type": "image_picker",
          "id": "star_image",
          "label": "Imagem da estrela"
    	},
		{
          "type": "textarea",
          "id": "short_desc",
          "label": "Descrição curta",
          "default": "512 Avaliações"
    	}
	],
	"blocks": [
		{
			"type": "review_items",
			"name": "Avaliações",
			"settings": [
				{
					"type": "image_picker",
					"id": "client_image",
					"label": "Imagem do cliente"
				},
				{
					"type": "text",
					"id": "title",
					"label": "Nome do cliente",
					"default": "John Doe"
				},
				{
					"type": "text",
					"id": "short_desc",
					"label": "Breve descrição do cliente",
					"default": "Lorem ipsum dolor"
				},
				{
					"type": "image_picker",
                    "id": "star_image",
                    "label": "Imagem da estrela"
				},
				{
					"type": "text",
					"id": "rating",
					"label": "Classificação",
					"default": "4.5"
				},
				{
					"type": "textarea",
					"id": "message",
					"label": "Messagem",
					"default": "<p>'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo laborum.'</p>"
				}
			]
		}
	],
	"presets": [
		{
			"name": "Nosso cliente nos ama",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
