<div class="portfolio_grid_container discography_grid">
<?php
	$widget_id = $this->get_id();
	$slides = $this->get_settings('slides');
	$count_slides = count($slides);
	
	if(!empty($slides))
	{		
		//Get all settings
		$settings = $this->get_settings();
		
		//Get spacing class
		$spacing_class = '';
		if($settings['spacing'] != 'yes')
		{
			$spacing_class = 'has_no_space';
		}
		
		$column_class = 1;
		$thumb_image_name = 'musico-discography-grid';
		
		//Start displaying gallery columns
		switch($settings['columns']['size'])
		{
			case 1:
		   		$column_class = 'tg_one_col';
		   	break;
		   	
			case 2:
		   		$column_class = 'tg_two_cols';
		   	break;
		   	
		   	case 3:
		   	default:
		   		$column_class = 'tg_three_cols';
		   	break;
		   	
		   	case 4:
		   		$column_class = 'tg_four_cols';
		   	break;
		   	
		   	case 5:
		   		$column_class = 'tg_five_cols';
		   	break;
		   	
		   	case 6:
		   		$column_class = 'tg_six_cols';
		   	break;
		}
		
		$filterable_class = 'no_filter';
		
		if($settings['filterable'] == 'yes')
		{
			//Get filterable tags
			$filterable_tags = array();
			foreach ( $slides as $slide ) 
			{
				$filterable_tags[] = $slide['slide_tag'];
			}
			$filterable_tags = array_unique($filterable_tags);
			
			if(!empty($filterable_tags) && $settings['filterable'] == 'yes')
			{
				$filterable_class = 'filterable';
?>
<div class="portfolio_filter_wrapper">
		<a class="filter_tag_btn active" href="javascript:;" data-rel="all" data-cols="<?php echo esc_attr($settings['columns']['size']); ?>"><?php echo __( 'All', 'musico-elementor' ); ?></a>
	<?php
		foreach ( $filterable_tags as $filterable_tag ) 
		{
	?>
		<a class="filter_tag_btn" href="javascript:;" data-rel="<?php echo esc_attr(musico_sanitize_title(strtolower($filterable_tag))); ?>" data-cols="<?php echo esc_attr($settings['columns']['size']); ?>"><?php echo esc_html($filterable_tag); ?></a>
	<?php
		}
	?>
</div>
<?php
			}
		}
?>
<div class="portfolio_grid_content_wrapper portfolio_grid layout_<?php echo esc_attr($column_class); ?> <?php echo esc_attr($spacing_class); ?>" data-cols="<?php echo esc_attr($settings['columns']['size']); ?>">
<?php		
		$last_class = '';
		$count = 1;
		
		foreach ( $slides as $slide ) 
		{
			$slide_id = $slide['_id'];
			$last_class = '';
			if($count%$settings['columns']['size'] == 0)
			{
				$last_class = 'last';
			}
			
			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="portfolio_grid_wrapper <?php echo esc_attr($column_class); ?> <?php echo esc_attr($last_class); ?>  portfolio-<?php echo esc_attr($count); ?> tile scale-anm <?php echo esc_attr(musico_sanitize_title(strtolower($slide['slide_tag']))); ?> all <?php echo esc_attr($filterable_class); ?>">
			<div class='article' onclick="void(0)">
				<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>
<?php
			$count++;
		}
?>
<?php
	if($settings['spacing'] == 'yes')
	{
?>
<br class="clear"/>
<?php
	}
?>
</div>
<?php
	}
?>
</div>