<?php $slider = $this->getSlider() ?>
<?php if($slider && (count($this->getLookbooks())>0)): ?>
	<div class="lookbook-slider owl-carousel owl-theme <?php echo $slider->getCustomClass() ?>" id="lookbook_slider_<?php echo $slider->getId() ?>">
		<?php $lookbooks = $this->getLookbooks() ?>
		<?php foreach($lookbooks as $lookbook): ?>
			<div class="lookbook-container">
				<div class="mgs-lookbook-container">
					<div class="pin__image">
						<img src="<?php echo $this->getImageUrl($lookbook) ?>" alt="<?php $lookbook->getName() ?>" class="lookbook-image img-responsive"/>
					</div>
					<?php echo $this->getPinHtml($lookbook) ?>
				</div>
			</div>
		<?php endforeach ?>
	</div>
	<script type="text/javascript">
		require([
			'jquery',
			'mgs/owlcarousel',
		], function(jQuery){
			(function($) {
				$(document).ready(function () {
					$('#lookbook_slider_<?php echo $slider->getId() ?>').owlCarousel({
						items: 2,
						center: 'true',
						animateOut: 'fadeOut',
						loop: <?php echo $this->getLoop(); ?>,
						nav: <?php echo $this->getNavigation(); ?>,
						animateIn: 'true',
						dots: <?php echo $this->getPagination(); ?>,
						autoplay: <?php echo $this->getAutoPlay(); ?>,
						autoplayHoverPause: <?php echo $this->getStopAuto(); ?>,
						autoplayTimeout: <?php echo $this->getAutoplayTimeout(); ?>,
						animateOut: 'fadeOut',
						animateIn: 'fadeIn',
						responsive:{
        		0:{
            		items:1,
            		nav:true
         			},
						300:{
	            		items:1,
	            		nav:true
 	        				},
        		600:{
            		items:2,
            		nav:true
        				},
        		1000:{
            		items:2,
            		nav:true
         		}
					},
						navText: ['<?php echo $this->getPrevIcon() ?  $this->getPrevIcon() : '<i class="fa fa-long-arrow-left"></i>' ?>','<?php echo $this->getNextIcon() ? $this->getNextIcon() : '<i class="fa fa-long-arrow-right"></i>' ?>']
					});
				});
			})(jQuery);
		});
	</script>
<?php endif ?>