<?php
	
	$nav = "";
	
	$html = '<h2 class="text-center">'. $resource->getProperty("name") .'</h2>';
	$html .= '<div class="orbit" id="orbit-'. $resource->getProperty("uid") .'" role="region" aria-label="'. $resource->getProperty("name") .' images" data-orbit data-auto-play="false" data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">';
 		$html .= '<div class="orbit-wrapper">';
			
			$html .= '<div class="orbit-controls">';
				$html .= '<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>';
				$html .= '<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>';
			$html .= '</div>';
			
			
			$html .= '<ul class="orbit-container">';
			foreach($resource->getProperty("images") as $i => $img)
			{
				$html .= '<li class="orbit-slide'. ($i == 0 ? " is-active" : "") .'">';
					$html .= '<div class="wrapper"><figure class="orbit-figure">';
						$html .= '<img class="orbit-image" src="'. $img .'" alt="">';
					$html .= '</figure></div>';
				$html .= '</li>';
				
				$nav .= '<button class="'. ($i == 0 ? " is-active" : "") .'" data-slide="'.$i.'"></button>';
			}
			$html .= '</ul>';
			
			$html .= '<nav class="orbit-bullets">';
			    $html .= $nav;
			$html .= '</nav>';

		$html .= '</div>';
	$html .= '</div>';

	echo $html;


	
?>