<?php
	
	/*
	 * Get Header
	 */
	$show_header_spacer = false;
	$header_class = "";	
	require_once 'inc/header.php';
	

	/*
	 * Project name
	 */
	$html = '<div class="grid-container">';
		$html .= '<div class="grid-x grid-padding-x">';
			$html .= '<div class="cell small-12 text-center">';
				$html .= '<h1 class="page__title">'. $work->name() .'</h1>';
			$html .= '</div>';
		$html .= '</div>';
	$html .= '</div>';	


	/*
	 * items
	 */
	$html .= '<div class="grid-container">';
		$html .= '<div class="grid-x grid-padding-x align-center">';
		
			$slides = [];
			
			foreach($work->images() as $i => $image)
			{
			
				// inline html
				$html .= '<div class="cell small-12 medium-4 portfolio__item">';
					$html .= '<a class="portfolio__image'. $image->videoClass() .'" data-toggle="gallery-reveal" data-slideid="'. $i .'" data-reveal-id="#hamoen-gallery">'. $image->lazyImageDiv() .'</a>';
					$html .= '<h4>'. $image->name() .'</h4>'; 
				$html .= '</div>';
				
				
				// popup slide	
				$slide = '<div class="text-center">';
					$slide.= '<div class="align-middle">';
						
						if($image->embedCode())
						{
							$slide.= '<figure class="hamoen-figure hamoen-figure__video">';
								$slide .= '<div class="responsive-embed widescreen">' . $image->embedCode() .'</div>';
							$slide.= '</figure>';
						}
						else
						{
							$slide.= '<figure class="hamoen-figure">';
								$slide .= $image->lazyImage("lazy orbit-image hamoen-image");
							$slide.= '</figure>';
						}
							
						$slide .= '<div class="hamoen-image-description text-left">';
							$slide .= '<h3>'. $image->name() .'</h3>';
							$slide .= $image->description();
						$slide .= '</div>';
					
					
					
						
					
					
					$slide.= '</div>';
			  	$slide .= '</div>';
				
				
				// push in array		  
				$slides[] = $slide;
				
			}
		
					
		$html .= '</div>';
	$html .= '</div>';	

	echo $data["config"]->wrapAsSection($html,null,"portfolio");
	
	
	
	?>
	
	<div class="reveal full reveal__hamoen" id="gallery-reveal" data-reveal data-close-on-click="true" data-animation-in="fade-in" data-animation-out="fade-out" data-v-offset="0">
		
		<div class="reveal__hamoen--inner">
			
			<div class="image-carousel">
				<?php
					echo implode("", $slides);
				?>
			</div>
			
		</div>
			
			
		<button class="close-button close-button__reveal-hamoen" data-close aria-label="Close reveal" type="button">
			<span aria-hidden="true"><i class="fal fa-times"></i></span>
		</button>
	</div>

	
	<?php

	/*
	 * Get Footer
	 */
	require_once 'inc/footer.php';
			
	
	?>