<div id="home-page" class="index-section home-section featured_content_{{ section.id }}">
	<div class="">
      <div class="home-page-content overlay-{{ section.settings.home-page-background-overlay }}" {% if section.settings.home-page-bg %} style="background-image:url({{ section.settings.home-page-bg | img_url: '1024x' }})" {% endif %}>

              {% for block in section.blocks %}
              <div class="grid wrapper wrapper--margins" {{ block.shopify_attributes }}>

                  {% case block.type %}

                      {% when "text" %}

                          {% if block.settings.title != blank %}<h{{section.settings.heading_tag}} style="font-weight:{{ section.settings.heading_tag_text_style6}};color:{{section.settings.heading_color}};" class="home-section-title feature_content_{{ section.settings.header_position }} featured_cont_title" >{{ block.settings.title | escape }}</h{{section.settings.heading_tag}}>{% endif %}
                              <div class="rte featu_cont">
                              	{% if block.settings.content_icon != blank %}
                                <div class="rte icon_wrap" style="color:{{block.settings.icon_color}}; text-align:left;">
                                    <i class="fa fa-{{block.settings.content_icon}} fa-2x" aria-hidden="true"></i>
                                </div>
                                {% endif %}
                                <div class="rte text_wrap" style="color:{{section.settings.content_color}}">
                                    {{ block.settings.content }}
                                </div>
                			  </div>
                			  <div class="rte featu_cont">
                                {% if block.settings.content_icon2 != blank %}
                                  <div class="rte icon_wrap" style="color:{{block.settings.icon_color2}}; text-align:left;">
                                      <i class="fa fa-{{block.settings.content_icon2}} fa-2x" aria-hidden="true"></i>
                                  </div>
                                {% endif %}
                                <div class="rte text_wrap" style="color:{{section.settings.content_color}}">
                                    {{ block.settings.content2 }}
                                </div>
                			  </div>

                      {% when "page" %}

                          {% if block.settings.page == blank or pages[block.settings.page] == empty %}

                              <p style="color:{{section.settings.content_color}}">{{ 'homepage.upscoring.no_content' | t }}</p>

                          {% else %}

                              {% if block.settings.show_heading %}<h{{section.settings.heading_tag}} style="font-weight:{{ section.settings.heading_tag_text_style6}};" class="home-section-title feature_content_{{ section.settings.header_position }}" style="color:{{section.settings.heading_color}}">{{ pages[block.settings.page].title }}</h{{section.settings.heading_tag}}>{% endif %}
                              <div class="rte" style="color:{{section.settings.content_color}}">
                                  {{ pages[block.settings.page].content }}
                              </div>

                          {% endif %}

                  {% endcase %}

              </div>

          {% endfor %}

      </div>
    </div>
</div>

{% schema %}
	{
		"name": "Featured Content",
		"settings": [
			{
              	"type": "paragraph",
              	"content": "Video Tutorial FR : [Featured Content by Ulrich Vallée](https:\/\/www.ulrichvallee.com\/pages\/featured-content)"
        	},
			{
				"type": "image_picker",
				"id": "home-page-bg",
				"label": "Background Image Option",
				"info": "Minimun: 1280px X 797px - Maximum : 2000px X 1245px"
			},
			{
				"type": "checkbox",
				"id": "home-page-background-overlay",
				"label": "Add white overlay on background image"
			},
			{
				"type": "color",
				"id": "heading_color",
				"label": "Heading Color",
				"default":"#000000"
			},
			{
				"type": "color",
				"id": "content_color",
				"label": "Content Color",
				"default":"#000000"
			},
			{
              "type": "select",
              "id": "heading_tag",
              "label": "Heading Tag",
              "default":"2",
              "options": [
                {
                    "value": "1",
                    "label": "H1"
                },
                {
                    "value": "2",
                    "label": "H2"
                },
                {
                    "value": "3",
                    "label": "H3"
                },
                {
                    "value": "4",
                    "label": "H4"
                },
                {
                    "value": "5",
                    "label": "H5"
                },
                {
                    "value": "6",
                    "label": "H6"
                }
              ]
            },
			{
              "type": "select",
              "id": "heading_tag_text_style6",
              "label": "Heading Font Style",
              "options": [
                {
                  "value": "300",
                  "label": "Lighter",
                  "group": "Font Style"
                },
                {
                  "value": "400",
                  "label": "Normal",
                  "group": "Font Style"
                },
                {
                  "value": "600",
                  "label": "Bold",
                  "group": "Font Style"
                },
                {
                  "value": "700",
                  "label": "Bolder",
                  "group": "Font Style"
                }
              ],
              "default": "600"
            },
			{
              "type": "select",
              "id": "header_position",
              "label": "Header Position",
              "default":"left",
              "options": [
                {
                    "value": "left",
                    "label": "Left"
                },
                {
                    "value": "center",
                    "label": "Center"
                }
              ]
            }
		],
		"blocks": [
			{
			 "type": "text",
			 "name": "Text",
			 "settings": [
				{
					"type": "text",
					"id": "title",
					"label": "Heading",
					"default": "Featured Content"
				},
				{
                    "type": "richtext",
                    "id": "content",
                    "label": "Text 1",
                    "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
                },
				{
                    "type":"text",
                    "id":"content_icon",
                    "label":"Icon 1",
                    "default":"times",
					"info":"For More Icon Names: [Click Here](https:\/\/fontawesome.com\/v4.7.0\/icons\/)"
				},
				{
                    "type": "color",
                    "id": "icon_color",
                    "label": "Icon 1 Color",
                    "default":"#febe05"
                },
				{
                    "type": "richtext",
                    "id": "content2",
                    "label": "Text 2",
                    "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
                },
				{
                    "type":"text",
                    "id":"content_icon2",
                    "label":"Icon 2",
                    "default":"heart",
					"info":"For More Icon Names: [Click Here](https:\/\/fontawesome.com\/v4.7.0\/icons\/)"
				},
				{
                    "type": "color",
                    "id": "icon_color2",
                    "label": "Icon Color 2",
                    "default":"#febe05"
                }
		 	]
		 }
		 
	 ],
		"presets": [{
			"name": "Featured Content",
			"category": "Text",
			"blocks": [
				{
					"type": "text"
				}
			]
		}]
	}
{% endschema %}

<style>
.featured_content_{{ section.id }} .home-section-title::after{
	background:{{section.settings.heading_color}};
}
</style>