{% assign _hide_mobile = section.settings.hide_mobile %}
{% assign _layout = section.settings.layout %}
{% assign _background_style = section.settings.background_style %}
{% assign _background_color = section.settings.background_color %}
{% assign _background_img = section.settings.background_img %}
{% assign _text_color = section.settings.text_color %}
{% assign _pagination = section.settings.pagination %}
{% assign _navigation = section.settings.navigation %}

<div id="testimonial-{{ section.id }}" class="testimonial-wrapper{% if _layout == 'boxed' %} boxed{% else %} no-padding{% endif %}{% if _hide_mobile %} d-none d-md-block{% endif %}">

	<div class="testimonial-inner" style="{% if _background_style == 'color' %}background-color: {{ _background_color }}{% else %}background-image: url({{ _background_img | img_url: '1170x' }}); background-size: 100%; background-repeat: no-repeat{% endif %};">  
		{% if section.blocks.size > 0 %}
			{% for block in section.blocks %}
				{%- assign _image = block.settings.image -%}
		        {%- assign _image_size = block.settings.image_size -%}
		        {%- assign _message = block.settings.message -%}
		        {%- assign _rating = block.settings.rating -%}
		        {%- assign _name = block.settings.name -%}

		        <div class="media testimonial-item">
		        	{% unless _image == blank %}<img class="mr-3 customer-img" src="{{ _image | img_url: _image_size }}" alt="Image" />{% endunless %}

					<div class="media-body testimonial-content">
						<span class="rating">
				            {% case _rating %}
				              {% when '1' %}
				                <span class="active"></span><span></span><span></span><span></span><span></span>
				              {% when '2' %}
				                <span class="active"></span><span class="active"></span><span></span><span></span><span></span>
				              {% when '3' %}
				                <span class="active"></span><span class="active"></span><span class="active"></span><span></span><span></span>
				              {% when '4' %}
				                <span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
				              {% else %}
				                <span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span>
				            {% endcase %}
				        </span>

				        {% unless _message == blank %}<p class="message">{{ _message }}</p>{% endunless %}

					    {% unless _name == blank %}<span class="name">{{ _name }}</span>{% endunless %}
					</div>
				</div>
			{% endfor %}

		{% endif %}
	</div>	
	
			<style type="text/css">
				#testimonial-{{ section.id }} .message,  #testimonial-{{ section.id }} .name{color: {{ _text_color }};}
			</style>
</div>

<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery("#testimonial-{{ section.id }} .testimonial-inner").length && jQuery('#testimonial-{{ section.id }} .testimonial-inner').owlCarousel({
            nav			: {{_navigation}}
          	,dots 		: {{_pagination}}
			,items		: 1 
			,navText	: ['<span class="button-prev"></span>', '<span class="button-next"></span>']
			
        });
	})
</script>

{% if section.blocks.size > 0 %}

{% endif %}

{% schema %}
{
    "name": "Testimonial",
    "settings": [
    	{
    		"type":"header",
    		"content": "Created by 'Testimonial' section"
    	},
		{
		    "type": "header",
		    "content": "Layout"
		},
		{
		    "type": "checkbox",
		    "id": "hide_mobile",
		    "label": "Visibility: Hide for Mobile"
		},
		{
		    "type": "select",
		    "id": "layout",
		    "label": "Section Layout Mode",
		    "default": "boxed",
		    "options": [
		        {
		          "value": "boxed",
		          "label": "Boxed"
		        },
		        {
		          "value": "full",
		          "label": "Wide"
		        }
		    ]
		},
		{
    		"type":"header",
    		"content":"Background"
    	},
    	{
    		"type":"select",
    		"id":"background_style",
    		"label":"Background style",
    		"options":[
    			{"value":"color","label":"Color"},
    			{"value":"image","label":"Image"}
    		],
    		"default":"color"
    	},
    	{
    		"type":"color",
    		"id":"background_color",
    		"label":"Background color",
    		"default":"#ffffff"
    	},
    	{
    		"type":"image_picker",
    		"id":"background_img",
    		"label":"Background image"
    	},
    	{
    		"type":"color",
    		"id":"text_color",
    		"label":"Text color"
    	},
    	{
    		"type":"header",
    		"content":"Slider settings"
    	},
    	{
    		"type":"checkbox",
    		"id":"pagination",
    		"label":"Show slider pagination",
    		"default":true
    	},
    	{
    		"type":"checkbox",
    		"id":"navigation",
    		"label":"Show slider prev - next navigation",
    		"default":true
    	}
    ],
    "blocks": [
    	{
    		"type": "image",
	      	"name": "Customer",
	      	"settings": [
	      		{
			        "label": "Image",
			        "id": "image",
			        "type": "image_picker"
			    },
			    {
			        "type": "text",
			        "id": "image_size",
			        "label": "Image size",
			        "info": "Default is 100x100 pixels",
					"default": "100x100"
			    },
			   	{
			        "type": "select",
			        "id": "rating",
			        "label": "Rating",
			        "default": "5",
			        "options": [
			          	{
			            	"value": "1",
			            	"label": "1 star"
			          	},
			          	{
			            	"value": "2",
			            	"label": "2 stars"
			          	},
			          	{
			            	"value": "3",
			            	"label": "3 stars"
			          	},
			          	{
			            	"value": "4",
			            	"label": "4 stars"
			          	},
			          	{
			            	"value": "5",
			            	"label": "5 stars"
			          	}
			        ]
			    },
			    {
			        "label": "Message",
			        "id": "message",
			        "type": "textarea",
					"default": "Good design is as little design as possible"
			    },
			   	{
			        "label": "Name",
			        "id": "name",
			        "type": "text",
					"default": "Igor ten"
			    }
	      	]
    	}
    ],
    "presets": [
	    {
		    "name": "Testimonial",
		    "category": "Information",
		    "blocks": [
		        { "type": "image" },
				{ "type": "image" },
				{ "type": "image" }
		    ]
	    }
	]
}
{% endschema %}