<?php
	
	echo '<div class="grid-x grid-padding-x">';


		/*
	 	 * Product name & lead
		 */
		echo '<div class="cell small-12">';
			echo '<h1>' . $product->getLead() . '</h1>';
			echo '<h4 class="blue"><i class="fal fa-truck"></i>'. $product->getDeliveryNote() .'</h4>';
		echo '</div>';
	
	
		/*
	 	 * callout & text
		 */
		echo '<div class="cell small-12 medium-7">';
			echo '<div class="callout primary">' . $product->getCallout() . '</div>';
			echo '<p>' . $product->getIntroText(190) . '</p>';
		echo '</div>';
	
	
		/*
		 * Product images
		 */
		echo  '<div class="cell small-12 medium-4 medium-offset-1">';
								
			$image_list = '';
			$bullets 	= '';
			foreach($product->images as $i => $image)
			{
				$image_list .= '<li class="is-active orbit-slide">';
					$image_list .= '<figure class="orbit-figure">';
					$image_list .= '<img src="/upload/'.  $image->getUrl() .'" alt="'. $image->getAltText() .'">';
					$image_list .= '<figcaption class="orbit-caption hide">'. $image->getFigcaption() .'!</figcaption>';
					$image_list .= '</figure>';
				$image_list .= '</li>';

				$bullets .= '<button class="'. ($i == 0 ? "is-active" : "") .'"data-slide="'. $i .'"><span class="show-for-sr">'. $image->getFigcaption() .'</span></button>';
			}

			echo '<div class="product-images">';
				echo '<div class="orbit" role="region" aria-label="'. $product->getLead() .'" data-orbit>';

					// orbit wrapper
					echo '<div class="orbit-wrapper">';
						echo '<ul class="orbit-container">';
							echo $image_list;
						echo '</ul>';
					echo '</div>';
	
					// nav bullets
					echo '<nav class="orbit-bullets">' . $bullets . '</nav>';

				echo '</div>';
			echo '</div>';

		echo '</div>';
	
	echo '</div>';

?>