<?php
	$widget_id = $this->get_id();
	$slides = $this->get_settings('slides');
	$count_slides = count($slides);
	
	//Get all settings
	$settings = $this->get_settings();
?>
<div class="swiper-container discography_coverflow" data-start="<?php echo esc_attr($settings['start_at']['size']); ?>">
<?php
	if(!empty($slides))
	{		
		$thumb_image_name = 'musico-discography-grid';
?>
<div class="swiper-wrapper">
<?php		
		$last_class = '';
		$count = 0;
		
		foreach ( $slides as $slide ) 
		{
			$slide_id = $slide['_id'];
			
			if(is_numeric($slide['slide_image']['id']) && !empty($slide['slide_image']['id']))
			{
				if(is_numeric($slide['slide_image']['id']) && (!isset($_GET['elementor_library']) OR empty($_GET['elementor_library'])))
				{
					$image_url = wp_get_attachment_image_src($slide['slide_image']['id'], $thumb_image_name, true);
				}
				else
				{
					$image_url[0] = $slide['slide_image']['url'];
				}
				
				//Get image meta data
				$image_alt = get_post_meta($slide['slide_image']['id'], '_wp_attachment_image_alt', true);
			}
			else
			{
				$image_url[0] = $slide['slide_image']['url'];
				$image_alt = '';
			}
			
			$target = $slide['slide_link']['is_external'] ? 'target="_blank"' : '';
?>
		<div class="swiper-slide" data-id="<?php echo esc_attr($count); ?>">
			<div class='swiper-content'>
				<div class="article">
					<div class='article-preview'>
						<?php
							if(isset($slide['slide_audio']) && !empty($slide['slide_audio']))
							{
						?>
							<audio id="audio_<?php echo esc_attr($slide_id); ?>" controls>
						  		<source src="<?php echo esc_url($slide['slide_audio']); ?>" type="audio/mpeg">
						  		<?php echo __( 'Your browser does not support the audio element.', 'musico-elementor' ); ?>
							</audio>
							
							<div id="audio_<?php echo esc_attr($slide_id); ?>_playing" class="music-playing">
								<div class="bar bar1" style="height: 15%;"></div>
								<div class="bar bar2" style="height: 75%;"></div>
								<div class="bar bar3" style="height: 25%;"></div>
								<div class="bar bar4" style="height: 90%;"></div>
							</div>
						<?php
							}
						?>
						<div class="controls">
					    	<?php
								if(isset($slide['slide_audio']) && !empty($slide['slide_audio']))
								{
							?>
								<label for="btn-play" class="lbl-btn-play" data-audio="audio_<?php echo esc_attr($slide_id); ?>"><span><i class="fa fa-play"></i></span></label>
					
								<label for="btn-pause" class="lbl-btn-pause" data-audio="audio_<?php echo esc_attr($slide_id); ?>"><span><i class="fa fa-pause"></i></span></label>
							<?php
								}
							?>
							<?php
								if(isset($slide['slide_link']['url']) && !empty($slide['slide_link']['url']))
								{
							?>
							<label class="lbl-btn-reset" data-audio="audio_<?php echo esc_attr($slide_id); ?>" data-link="<?php echo esc_url($slide['slide_link']['url']); ?>" data-external="<?php echo esc_attr($slide['slide_link']['is_external']); ?>"><span>
								<i class="fa fa-external-link-square"></i>
							</span></label>
							<?php
								}
							?>
						</div>
				  	</div>
				  	<div class='article-thumbnail' style='background-image: url(<?php echo esc_url($image_url[0]); ?>)'>
				    <h2>
				      <span><?php echo esc_html($slide['slide_subtitle']); ?></span>
				      <?php echo esc_html($slide['slide_title']); ?>
				    </h2>
				  </div>
				</div>
			</div>
		</div>
<?php
			$count++;
		}
?>
</div>
<?php
	}
?>
<div class="swiper-pagination"></div>
</div>