<div class="home_icon" style="background: {{ section.settings.background_color }}">
  <div class="icon_wrapper">
    {% if section.blocks.size > 0 %}
    <ul>
      {% for block in section.blocks %}
      <li>
        <div class="inner_content">
          <div class="img animatable fadeInDownBig animate">
            {% if block.settings.icon != blank %}
           {% comment %} <img class="lazyload" data-src="{{ block.settings.icon | img_url: '240x80' }}" alt="" />{% endcomment %}

              {% include 'image-element', image: block.settings.icon, alt: block.settings.title %}

            {% else %}
            {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          </div>
          <div class="text animatable fadeInUpBig animate">
            {% if block.settings.title != blank %}
            <h5 class="title">{{ block.settings.title }}</h5>
            {% endif %}
            {% if block.settings.content != blank %}
            <p>{{ block.settings.content }}</p>
            {% endif %}
          </div>
        </div>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <ul>
      {% for i in (1..5) %}
      <li>
        <div class="inner_content">
          <div class="img">
            {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
          </div>
          <div class="text">
            <br>
            <h5 class="title">Lorem Ipsum</h5>
            <p>Cras convallis leo sit amet commodo dapibus</p>
          </div>
        </div>
      </li>
      {% endfor %}
    </ul>
    {% endif %}
  </div>
</div>

{% schema %}
  {
    "name": "Ícones - Home",
    "max_blocks": 4,
    "settings": [
		{
			"type": "color",
			"id": "background_color",
			"label": "Cor de fundo",
			"default": "#fdefe1"
		}
	],
	"blocks": [
    {
      "type": "blog",
      "name": "Ícone",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Adicionar ícone"
        },
		{
          "type": "text",
          "id": "title",
          "label": "Título",
		  "default": "Escreva o título"
        },
		{
          "type": "textarea",
          "id": "content",
          "label": "Breve conteúdo",
		  "default": "Escreva algo aqui."
        }
      ]
    }
  ],
	"presets": [
		{
			"name": "Ícones - Home",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
