
<div class="module so-latest-blog {{ class_suffix }} preset01-{{ nb_column0 }} preset02-{{ nb_column1 }} preset03-{{ nb_column2 }} preset04-{{ nb_column3 }} preset05-{{ nb_column4 }}">

	{% if disp_title_module %}
		<h3 class="modtitle"><span>{{ head_name }}</span></h3>
	{% endif %}
	{% if pre_text != '' %}
		<div class="form-group">{{ pre_text }}</div>
	{% endif %}
	<div class="modcontent clearfix">
		{% if blogs is not empty and error_no_database is defined and error_no_database == '' %}	
			{% set count_item = blogs|length %}
			{% set cls_btn_page = button_page == 'top' ? 'buttom-type1' : 'button-type2' %}
			{% set btn_type 	= button_page == 'top' ? 'button-type1' : 'button-type2' %}
			{% set btn_prev 	= button_page == 'top' ? '&#171;' : '&#139;' %}
			{% set btn_next 	= button_page == 'top' ? '&#187;':'&#155;' %}
			{% set i = 0 %}
			<div id="{{ tag_id  }}" class="so-blog-external {{ cls_btn_page }} {{ btn_type }}">
				{% if type_show == 'simple' %}
					<div class="blog-external-simple">
						{% set k=0 %}
						{% for key, blog in blogs %}
							{% set k = k + 1 %}
							<div class="cat-wrap">
								<div class="media">
									{{ include (theme_config~"/template/extension/module/so_latest_blog/default_items.twig") }}
								</div>
							</div>
							{% set clear = 'clr1' %}
							{% if k % 2 == 0 %} {% set clear = clear ~' clr2' %}{% endif %}
							{% if k % 3 == 0 %} {% set clear = clear ~' clr3' %}{% endif %}
							{% if k % 4 == 0 %} {% set clear = clear ~' clr4' %}{% endif %}
							{% if k % 5 == 0 %} {% set clear = clear ~' clr5' %}{% endif %}
							{% if k % 6 == 0 %} {% set clear = clear ~' clr6' %}{% endif %}
							<div class="{{ clear }}"></div>
						{% endfor %}
					</div>
				{% else %}
					<div class="blog-external" data-effect="{{ effect }}">			
						{% for key, blog in blogs %}
							{% set i = i + 1 %}
							{% if (i % nb_rows == 1 or nb_rows == 1) %}
								<div class="media">
							{% endif %}

							{{ include (theme_config~"/template/extension/module/so_latest_blog/default_items.twig") }}
							
							{% if (i % nb_rows == 0 or i == count_item) %}
								</div>
							{% endif %}				
						{% endfor %}
					</div>
				{% endif %}
			</div>
			<script type="text/javascript">
				//<![CDATA[
				jQuery(document).ready(function ($) {
					;(function (element) {
						var $element = $(element),
								$extraslider = $(".blog-external", $element),
								_delay = {{ delay }},
						_duration = {{ duration }},
						_effect = '{{ effect }}';

						this_item = $extraslider.find('div.media');
						this_item.find('div.item:eq(0)').addClass('head-button');
						this_item.find('div.item:eq(0) .media-heading').addClass('head-item');
						this_item.find('div.item:eq(0) .media-left').addClass('so-block');
						this_item.find('div.item:eq(0) .media-content').addClass('so-block');
						$extraslider.on("initialized.owl.carousel2", function () {
							var $item_active = $(".owl2-item.active", $element);
							if ($item_active.length > 1 && _effect != "none") {
								_getAnimate($item_active);
							}
							else {
								var $item = $(".owl2-item", $element);
								$item.css({"opacity": 1, "filter": "alpha(opacity = 100)"});
							}
							{% if dots == "true" %}
								if ($(".owl2-dot", $element).length < 2) {
									$(".owl2-prev", $element).css("display", "none");
									$(".owl2-next", $element).css("display", "none");
									$(".owl2-dot", $element).css("display", "none");
								}
							{% endif %}

							{% if button_page == "top" %}
								$(".owl2-controls", $element).insertBefore($extraslider);
								$(".owl2-dots", $element).insertAfter($(".owl2-prev", $element));
							{% else %}
								$(".owl2-nav", $element).insertBefore($extraslider);
								$(".owl2-controls", $element).insertAfter($extraslider);
							{% endif %}
						});

						$extraslider.owlCarousel2({
							margin: {{ margin }},
							slideBy: {{ slideBy }},
							autoplay: {{ autoplay }},
							autoplayHoverPause: {{ pausehover }},
							autoplayTimeout: {{ autoplay_timeout }},
							autoplaySpeed: {{ autoplaySpeed }},
							startPosition: {{ startPosition }},
							mouseDrag: {{ mouseDrag }},
							touchDrag: {{ touchDrag }},
							autoWidth: false,
							rtl: {{ direction == 'ltr' ? 'false' : 'true' }},
							responsive: {
								0: 	{ items: {{ nb_column4 }} } ,
								480: { items: {{ nb_column3 }} },
								768: { items: {{ nb_column2 }} },
								992: { items: {{ nb_column1 }} },
								1200: {items: {{ nb_column0 }}},
							},
							dotClass: "owl2-dot",
							dotsClass: "owl2-dots",
							dots: {{ dots }},
							dotsSpeed:{{ dotsSpeed }},
							nav: {{ nav }},
							loop: {{ loop }},
							navSpeed: {{ navSpeed }},
							navText: ["{{ btn_prev }}", "{{ btn_next }}"],
							navClass: ["owl2-prev", "owl2-next"]
						});

						$extraslider.on("translate.owl.carousel2", function (e) {
							{% if dots == "true" %}
								if ($(".owl2-dot", $element).length < 2) {
									$(".owl2-prev", $element).css("display", "none");
									$(".owl2-next", $element).css("display", "none");
									$(".owl2-dot", $element).css("display", "none");
								}
							{% endif %}

							//var $item_active = $(".owl2-item.active", $element);
							//_UngetAnimate($item_active);
							//_getAnimate($item_active);
						});

						$extraslider.on("translated.owl.carousel2", function (e) {
							{% if dots == "true" %}
								if ($(".owl2-dot", $element).length < 2) {
									$(".owl2-prev", $element).css("display", "none");
									$(".owl2-next", $element).css("display", "none");
									$(".owl2-dot", $element).css("display", "none");
								}
							{% endif %}

							var $item_active = $(".owl2-item.active", $element);
							var $item = $(".owl2-item", $element);

							_UngetAnimate($item);

							if ($item_active.length > 1 && _effect != "none") {
								_getAnimate($item_active);
							} else {
								$item.css({"opacity": 1, "filter": "alpha(opacity = 100)"});
							}
						});

						function _getAnimate($el) {
							if (_effect == "none") return;
							//if ($.browser.msie && parseInt($.browser.version, 10) <= 9) return;
							$extraslider.removeClass("extra-animate");
							$el.each(function (i) {
								var $_el = $(this);
								$(this).css({
									"-webkit-animation": _effect + " " + _duration + "ms ease both",
									"-moz-animation": _effect + " " + _duration + "ms ease both",
									"-o-animation": _effect + " " + _duration + "ms ease both",
									"animation": _effect + " " + _duration + "ms ease both",
									"-webkit-animation-delay": +i * _delay + "ms",
									"-moz-animation-delay": +i * _delay + "ms",
									"-o-animation-delay": +i * _delay + "ms",
									"animation-delay": +i * _delay + "ms",
									"opacity": 1
								}).animate({
									opacity: 1
								});

								if (i == $el.size() - 1) {
									$extraslider.addClass("extra-animate");
								}
							});
						}

						function _UngetAnimate($el) {
							$el.each(function (i) {
								$(this).css({
									"animation": "",
									"-webkit-animation": "",
									"-moz-animation": "",
									"-o-animation": "",
									"opacity": 1
								});
							});
						}
					})("#{{ tag_id }}");
				});
				//]]>
			</script>
		{% elseif error_no_database is defined and error_no_database != '' %}
			<div class="alert alert-info"><i class="fa fa-exclamation-circle"></i>{{ error_no_database }}</div>
		{% else %}
    		{{ NoItem }}
		{% endif %}
	</div>
	{% if post_text != '' %}
		<div class="form-group">
			{{ post_text }}
		</div>
	{% endif %}
</div>