<div class="home_image_with_text">
  <div class="page-width">
    <div class="image_with_text_container">
      <div class="left_image">
        {% if section.settings.main_img != blank %}
        <img class="lazyload" data-src="{{ section.settings.main_img | img_url: 'master' }}" alt="">
        {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </div>
      <div class="right_text">
        <div class="text_container">
          {% if section.settings.logo_img != blank %}
          <img class="lazyload" data-src="{{ section.settings.logo_img | img_url: 'master' }}" alt="" />
          {% else %}
          {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          {% if section.settings.title != blank %}
          <h2 class="title">{{ section.settings.title }}</h2>
          {% endif %}
          {% if section.settings.short_content != blank %}
          <div class="short_content">
            {{ section.settings.short_content }}
          </div>
          {% endif %}
          {% if section.settings.btn_text != blank %}
          <div class="btn_content">
            <a href="{% if section.settings.btn_url != blank %}{{ section.settings.btn_url }}{% else %}#{% endif %}" class="btn">{{ section.settings.btn_text }}</a>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>


<style type="text/css">
  .home_image_with_text .image_with_text_container .right_text .text_container .btn_content .btn {
    background: {{ section.settings.btn_bg_color }};
    color: {{ section.settings.btn_text_color }};
  }
  .home_image_with_text .image_with_text_container .right_text .text_container .btn_content .btn:hover {
    background: {{ section.settings.btn_bg_hover_color }};
    color: {{ section.settings.btn_text_hover_color }};
  }
</style>


{% schema %}
  {
    "name": "Imagem esq e Texto dir",
    "settings": [
		{
			"type": "image_picker",
			"id": "main_img",
			"label": "Imagem da esquerda",
			"info": "Upload image size: 600x560"
		},
		{
			"type": "header",
			"content": "Conteúdo da direira"
		},
		{
			"type": "image_picker",
			"id": "logo_img",
			"label": "Imagem da logo"
		},
		{
			"type": "text",
			"id": "title",
			"label": "Título",
			"default": "LEVANTE INSTANTANEAMENTE SEU VISUAL"
		},
		{
			"type": "textarea",
			"id": "short_content",
			"label": "Conteúdo curto",
			"default": "<p>Escreva uma breve descrição aqui.</p>"
		},
		{
			"type": "text",
			"id": "btn_text",
			"label": "Texto do botão",
			"default": "Compre agora"
		},
		{
			"type": "url",
			"id": "btn_url",
			"label": "Link do botão"
		},
		{
            "type": "color",
            "id": "btn_bg_color",
            "label": "Cor de fundo do botão",
            "default": "#f39ac1"
        },
        {
            "type": "color",
            "id": "btn_bg_hover_color",
            "label": "Cor de fundo do botão ao passar o mouse",
            "default": "#000000"
        },
        {
            "type": "color",
            "id": "btn_text_color",
            "label": "Cor do texto do botão",
            "default": "#ffffff"
        },
        {
            "type": "color",
            "id": "btn_text_hover_color",
            "label": "Cor do texto do botão ao passar o mouse",
            "default": "#ffffff"
        }
	],
	"presets": [
		{
			"name": "Imagem esq e Texto dir",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
